Копіювання через Object.assign

JavaScriptJunior~1 хв читання

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

При копіюванні за допомогою Object.assign() створюється поверхнева копія (shallow copy). Це означає, що вкладені об'єкти й масиви копіюються за посиланням, а не за значенням.

Приклад

javascript

const user = {
  name: 'Богдан',
  address: {
    city: 'Київ',
    zip: 12345
  }
};

const clone = Object.assign({}, user);
clone.address.city = 'Львів';

console.log(user.address.city); // 'Львів'

Чому так:

Object.assign() копіює лише перший рівень властивостей;
властивість address - це об'єкт, тому копіюється посилання;
зміна вкладеного об'єкта (city) відображається в оригіналі.

Як це виглядає в пам'яті

javascript

user.address ─────┐
                   │  (один і той самий об'єкт)
clone.address ────┘

Обидва об'єкти (user і clone) посилаються на один і той самий address. Тому зміна всередині address торкається обох.

Але! Примітивні властивості копіюються нормально

javascript

const user = { name: 'Богдан', age: 25 };
const clone = Object.assign({}, user);

clone.name = 'Олег';
console.log(user.name); // "Богдан" (незалежно)

Лише вкладені об'єкти або масиви продовжують бути спільними.

Як уникнути цієї проблеми

Якщо хочеш зробити глибоку копію, використовуй:

`structuredClone()` (вбудований сучасний спосіб)

javascript

const clone = structuredClone(user);
clone.address.city = 'Львів';
console.log(user.address.city); // "Київ"

`JSON.parse(JSON.stringify())` (універсально, але з обмеженнями)

javascript

const clone = JSON.parse(JSON.stringify(user));

`_.cloneDeep()` з Lodash (надійно і сумісно з усіма типами)

javascript

import _ from 'lodash';
const clone = _.cloneDeep(user);

ПІДСУМОК

Що копіює `Object.assign()`	Поведінка
Примітивні значення (`string`, `number`, `boolean`)	копіюються за значенням
Вкладені об'єкти й масиви	копіюються за посиланням
Функції	копіюються за посиланням
Глибокі структури	не копіюються незалежно

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

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

Premium

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