Копіювання об'єкта

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

1. Поверхневе копіювання (shallow copy)

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

Спосіб 1: Spread (`...`)

javascript

const user = { name: 'Tim', age: 25 };
const clone = { ...user };

console.log(clone); // { name: 'Tim', age: 25 }
console.log(clone === user); // false

Швидко, зручно і сучасно. Але вкладені структури (об'єкти, масиви) залишаються посиланнями на оригінал:

javascript

const user = { name: 'Tim', address: { city: 'Kyiv' } };
const clone = { ...user };

clone.address.city = 'Lviv';
console.log(user.address.city); // "Lviv" (вплив на оригінал)

Спосіб 2: `Object.assign()`

javascript

const user = { name: 'Tim', age: 25 };
const clone = Object.assign({}, user);

console.log(clone); // { name: 'Tim', age: 25 }

Аналог spread, теж поверхнева копія.

Спосіб 3: Через цикл (ручний спосіб)

javascript

const clone = {};
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    clone[key] = user[key];
  }
}

Старомодний, але працює навіть у старих браузерах.

2. Глибоке копіювання (deep copy)

Створює повністю незалежну копію - навіть вкладені об'єкти не пов'язані з оригіналом.

Спосіб 1: `structuredClone()` (сучасний і безпечний)

javascript

const user = {
  name: 'Tim',
  address: { city: 'Kyiv', zip: 12345 }
};

const clone = structuredClone(user);

clone.address.city = 'Lviv';

console.log(user.address.city); // "Kyiv"

Підтримується в усіх сучасних браузерах і Node.js 17+. Копіює:

вкладені об'єкти, масиви, дати, Map, Set тощо;
не копіює функції і прототипи (вони втрачаються).

Спосіб 2: Через `JSON.parse(JSON.stringify())`

javascript

const user = { name: 'Tim', address: { city: 'Kyiv' } };
const clone = JSON.parse(JSON.stringify(user));

clone.address.city = 'Lviv';
console.log(user.address.city); // "Kyiv"

Працює майже всюди, але:

функції, undefined, Symbol, Date, Map, Set і BigInt втрачаються;
може бути повільним на великих структурах.

Спосіб 3: Бібліотеки (lodash, Ramda тощо)

javascript

import _ from 'lodash';

const clone = _.cloneDeep(user);

Найнадійніший спосіб для складних структур - зберігає типи, вкладеність і працює швидко.

ПІДСУМОК

Тип копії	Спосіб	Копіює вкладені об'єкти?	Зберігає типи (`Date`, `Map`, `Set`)?
Поверхнева	`{ ...obj }`, `Object.assign()`	Ні	Так
Глибока	`structuredClone()`	Так	Так
Глибока (старий спосіб)	`JSON.parse(JSON.stringify())`	Так	Ні
Глибока (надійна)	`_.cloneDeep()`	Так	Так

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

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

Premium

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