Назвіть кілька способів створення незмінного об’єкта в JavaScript.

Повне пояснення

Що це і навіщо

Незмінність (immutability) гарантує, що об’єкт після створення не змінюється – це зменшує ризик побічних ефектів, полегшує дебаггінг і підвищує передбачуваність коду, особливо в реактивних фреймворках.

Ключові принципи/терміни

• Object.freeze(obj) – блокує додавання, видалення і зміну властивостей.
• Object.seal(obj) – забороняє додавання/видалення, але дозволяє змінювати існуючі.
• readonly у TS – компілятор перевіряє, що властивість не змінюється.
• as const – типізує літерал як константу, роблячи його readonly.
• Immutable.js / Immer – бібліотеки, що забезпечують глибоку незмінність.

Як це працює

1. Object.freeze рекурсивно заморожує об’єкт і його вкладені структури.
2. Object.seal лише забороняє зміну структури.
3. TS readonly – компілятор генерує помилку при спробі присвоїти нове значення.
4. Immer приймає мутаційний код і повертає новий об’єкт, не змінюючи оригінал.

Практика і реалізація

// 1. freeze
const obj = { a: 1, b: { c: 2 } };
Object.freeze(obj);
obj.b.c = 3; // не зміниться

// 2. TS readonly
interface Config {
  readonly host: string;
  readonly port: number;
}
const cfg: Config = { host: 'localhost', port: 8080 };
// cfg.port = 3000; // TS error

import produce from 'immer';
const state = { count: 0 };
const next = produce(state, draft => {
  draft.count += 1; // draft mutates, state stays
});

Тестування

import { expect } from 'vitest';
const obj = Object.freeze({ a: 1 });
test('freeze', () => {
  expect(() => { obj.a = 2; }).toThrow();
});

Дизайн‑рішення

• Для простих об’єктів використовуйте Object.freeze.
• Якщо потрібна глибока незмінність, застосуйте Immer або Immutable.js.
• У TS комбінуйте readonly з as const для статичної перевірки.

Оптимізація, типові помилки

• Object.freeze не рекурсивний; для глибоких об’єктів треба рекурсію.
• Object.seal не блокує зміни значень, лише структуру.
• Не забувайте про копіювання масивів/об’єктів перед freeze.

Диагностика

• Якщо властивість змінюється, перевірте чи не використовується Object.assign або пряме присвоєння.
• Для Immer перевірте, що ви не мутуєте draft поза функцією produce.

Альтернативи

• Lodash _.cloneDeep + Object.freeze.
• Immutable.js Map/Seq для колекцій.

Часті помилки (8)

1. Не рекурсивно заморожуєте вкладені об’єкти.
2. Використовуєте Object.seal замість freeze і очікуєте незмінність.
3. Застосовуєте readonly лише в TS, але не перевіряєте runtime.
4. Не копіюєте масив перед freeze, що змінює оригінал.
5. Застосовуєте Immer без produce, що не створює новий об’єкт.
6. Не розумієте, що Object.freeze не блокує додавання нових властивостей у дочірніх об’єктах.
7. Не перевіряєте, що as const застосовано до літералів.
8. Не тестуєте незмінність у юніт‑тестах, що призводить до непередбачуваних змін.