Чому не можна копіювати об'єкт оператором =?
Коротка відповідь
Оператор = не копіює об'єкт,
а лише копіює посилання на нього в пам'яті.
Тобто обидва імені (змінні) будуть вказувати на той самий об'єкт.
Приклад
javascript
const user = { name: 'Tim' };
const clone = user; // "копіюємо" об'єкт
clone.name = 'Oleh';
console.log(user.name); // 'Oleh'
console.log(clone.name); // 'Oleh'Зміна в clone змінила й user,
тому що це той самий об'єкт у пам'яті.
Як це виглядає "під капотом"
javascript
Пам'ять:
┌────────────┐
│ { name: 'Tim' } │
└──────┬─────┘
│
├── user
└── cloneІ user, і clone - це посилання на той самий об'єкт.
Коли ти пишеш const clone = user, створюється ще одне посилання, а не нова копія.
Чому так відбувається
У JavaScript є два типи даних:
| Тип даних | Як копіюється |
|---|---|
Примітиви (number, string, boolean, null, undefined, symbol, bigint) | за значенням |
Посилальні (object, array, function, Map, Set тощо) | за посиланням |
javascript
let a = 5;
let b = a;
b = 10;
console.log(a); // 5 (копія значення)
const obj1 = { x: 1 };
const obj2 = obj1;
obj2.x = 2;
console.log(obj1.x); // 2 (посилання)Якщо тобі потрібна саме копія
Використай один зі способів:
| Що потрібно | Як зробити |
|---|---|
| Поверхнева копія | { ...obj } або Object.assign({}, obj) |
| Глибока копія | structuredClone(obj) або _.cloneDeep(obj) |
Приклад:
javascript
const user = { name: 'Tim' };
const clone = { ...user }; // створює новий об'єкт
clone.name = 'Oleh';
console.log(user.name); // "Tim"
console.log(clone.name); // "Oleh"Тепер об'єкти незалежні.
Підсумок
Що відбувається при const b = a | Пояснення |
|---|---|
| Примітиви (числа, рядки тощо) | Копіюється значення |
| Об'єкти, масиви, функції | Копіюється посилання, а не вміст |
| Зміна копії впливає на оригінал | Так, якщо це об'єкт |
| Як уникнути | Використовуй spread ({ ...obj }) або structuredClone() |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.