> Что такое поверхностное и глубокое копирование объектов в JavaScript (JavaScript)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор, ООО Премиум ИТ Солюшен, EvApps, IT-One, Софт Медиа Групп, Библио-Глобус, EPAM, Сфера, EdenAI, SmartWay

Стек: JavaScript

> Пример ответа

Поверхностное (shallow) и глубокое (deep) копирование - это два подхода к созданию копий объектов, которые различаются по глубине копирования вложенных структур.

Поверхностное копирование создает новый объект, но копирует только ссылки на вложенные объекты, а не сами объекты. Изменение вложенного объекта в копии повлияет на оригинал. Примеры: Object.assign(), оператор spread ({...obj}), Array.prototype.slice().
Пример:

JAVASCRIPT
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 42;
console.log(original.b.c); // 42 - оригинал изменился

Глубокое копирование рекурсивно копирует все уровни вложенности, создавая полностью независимые объекты. Изменения в копии не затрагивают оригинал. Способы:

JSON.parse(JSON.stringify(obj)) - простой, но теряет функции, undefined, Symbol, циклические ссылки.
structuredClone() - современный нативный метод (поддержка с 2022 года), работает с большинством типов, включая Date, Map, Set.
Ручная рекурсивная функция или библиотеки (Lodash _.cloneDeep).

Пример с structuredClone:

JAVASCRIPT
const original = { a: 1, b: { c: 2 } };
const deepCopy = structuredClone(original);
deepCopy.b.c = 42;
console.log(original.b.c); // 2 - оригинал не изменился

Выбор зависит от задачи: для простых объектов без вложенности достаточно поверхностного копирования, для сложных структур с вложенными объектами - глубокое.