Незмінність та змінність у JavaScript

У JavaScript дані можуть змінюватися двома способами: змінно та незмінно. Розуміння різниці між ними особливо важливе при роботі зі станом у React, Redux та інших бібліотеках.

Змінність

Змінність означає, що об'єкт може бути змінений після створення.

const user = { name: "Alice" };
user.name = "Bob"; // змінюємо безпосередньо
console.log(user); // { name: "Bob" }

Такі зміни відбуваються за посиланням і можуть викликати непередбачувану поведінку, особливо якщо той самий об'єкт використовується в кількох місцях.

Незмінність

Незмінність означає, що об'єкт не змінюється, і коли відбуваються зміни, створюється нова копія.

const user = { name: "Alice" };
const updatedUser = { ...user, name: "Bob" }; // створюємо новий об'єкт

console.log(user);        // { name: "Alice" }
console.log(updatedUser); // { name: "Bob" }

Незмінність робить дані передбачуваними та безпечними для порівняння, що є критично важливим при повторному рендерингу компонентів у React.

Незмінність у React

React не відстежує зміни за вмістом об'єкта, він порівнює їх за посиланням (===).

Отже, змінне оновлення не викличе повторний рендер:

jsx

// неправильний підхід
state.items.push("newItem");
setState(state); // те саме посилання → React не оновить компонент

Правильний незмінний спосіб:

jsx

// створюємо новий масив
setState({ ...state, items: [...state.items, "newItem"] });

Порівняння

Властивість	Змінність	Незмінність
Зміна даних	Відбувається безпосередньо в об'єкті	Створюється нова копія
Поведінка в React	Може не викликати повторний рендер	Завжди надійно викликає повторний рендер
Безпека даних	Можливі побічні ефекти	Дані захищені від мутацій
Зручність налагодження	Складніше відстежувати	Легше відстежувати зміни

Приклади незмінних операцій:

// масиви
const newArr = [...oldArr, newItem];
const filtered = oldArr.filter(item => item !== target);

// об'єкти
const newObj = { ...oldObj, updatedKey: newValue };

// вкладені об'єкти
const updated = {
  ...state,
  user: {
    ...state.user,
    name: "John",
  },
};

Висновок:

Використовуйте незмінність, щоб зробити код передбачуваним, безпечним і сумісним з React. Це основа правильної роботи useEffect, React.memo, Redux та інших інструментів.

Зміст

ЗмінністьНезмінністьНезмінність у ReactПорівнянняПриклади незмінних операцій:

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Незмінність та змінність у JavaScript

#Змінність

#Незмінність

#Незмінність у React

#Порівняння

#Приклади незмінних операцій:

#Зміст