Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Immutable/mutable дані». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

| Термін | Переклад | Суть |
|---|---|---|
| **Mutable** | *змінюваний* | об'єкт, який можна змінювати після створення |
| **Immutable** | *незмінюваний* | дані, які не можна змінити: можна лише створити нові |

---

## Приклад: змінювані (mutable) дані

**Об'єкти і масиви** в JavaScript - *змінювані структури*.

```javascript
const user = { name: 'Oleh' };
user.name = 'Maria'; // змінюємо об'єкт

console.log(user); // { name: 'Maria' }
```

> Хоча змінна `user` оголошена через `const`,
> **її вміст (об'єкт)** можна змінити,
> тому що `const` забороняє змінювати саме **посилання**,
> а не дані, на які воно вказує.

---

### Приклад з масивом:

```javascript
const numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers); // [1, 2, 3, 4]
```

> Масиви - **mutable**, тому що ми можемо додавати, видаляти і змінювати елементи.

---

## Приклад: незмінювані (immutable) дані

**Примітиви** в JavaScript - незмінювані.

До них належать:
`string`, `number`, `boolean`, `null`, `undefined`, `symbol`, `bigint`.

---

### Приклад:

```javascript
let a = 'Hello';
a[0] = 'J'; // спроба змінити рядок
console.log(a); // "Hello" не змінилося
```

> Рядки - **immutable**.
> При "зміні" створюється новий рядок.

---

### Приклад з числами:

```javascript
let x = 5;
let y = x;

y = y + 1;

console.log(x); // 5
console.log(y); // 6
```

> Числа теж immutable: їх не можна "поміняти",
> можна лише створити нове значення.

---

## Як це працює в пам'яті

| Тип даних | Змінюваність | Де зберігається | Поведінка |
|---|---|---|---|
| Примітив (`string`, `number`, `boolean`...) | **Immutable** | Stack | При "зміні" створюється нове значення |
| Об'єкт, масив, функція | **Mutable** | Heap | Змінюється за посиланням |

---

Візуально:

```javascript
let name = 'Ol';
name = name + 'eh';
```

```javascript
STACK:
┌─────────────────┐
│ name = "Ol"      │  ← старий рядок
│ name = "Oleh"    │ ← новий рядок (створений заново)
└─────────────────┘
```

> Рядок `"Ol"` не змінюється, створюється новий `"Oleh"`.

---

## Чому це важливо

### 1. Поведінка при копіюванні

```javascript
const user1 = { name: 'Oleh' };
const user2 = user1;

user2.name = 'Maria';

console.log(user1.name); // "Maria" ← обидва змінилися (mutable)
```

### 2. У реактивних фреймворках (React, Redux, Vue тощо)

Іммутабельність - ключовий принцип:

- Дозволяє **відстежувати зміни стану** (через порівняння посилань)
- Полегшує **відкат змін (undo/redo)**
- Робить код **більш передбачуваним**

Приклад (підхід React):

```javascript
// погано (змінюваний)
state.user.age++;

// добре (іммутабельний)
setState({ ...state, user: { ...state.user, age: state.user.age + 1 } });
```

---

## Як зробити об'єкт незмінюваним вручну

```javascript
const user = Object.freeze({
  name: 'Oleh',
  age: 25
});

user.age = 30; // не спрацює
console.log(user.age); // 25
```

> `Object.freeze()` робить об'єкт **immutable** (на верхньому рівні).
> Для вкладених властивостей потрібно "глибоко заморожувати".

---

## Глибока заморозка (deep freeze)

```javascript
function deepFreeze(obj) {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  });
  return Object.freeze(obj);
}

const data = deepFreeze({
  user: { name: 'Oleh', skills: ['JS'] }
});

data.user.name = 'Maria'; // не зміниться
```

---

## Підсумок

| Категорія | Приклади | Змінюваність | Поведінка |
|---|---|---|---|
| **Immutable (незмінювані)** | `string`, `number`, `boolean`, `null`, `undefined`, `symbol`, `bigint` | не можна змінити | створюється нова копія |
| **Mutable (змінювані)** | `object`, `array`, `function`, `Map`, `Set` | можна змінити | змінюються "на місці" |

---

## Коротко

- **Immutable** - не можна змінити (тільки створити нове значення)
- **Mutable** - можна змінити "на місці"
- Примітиви - immutable, об'єкти і масиви - mutable
- Іммутабельність робить код надійнішим, особливо в React/Redux

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати582 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.