Что произойдет при изменении вложенных объектов после копирования?

В JavaScript объекты передаются и копируются по ссылке. Это означает, что при создании переменной, которая ссылается на существующий объект, или при поверхностном копировании (например, с помощью оператора spread ... или Object.assign), копируются только свойства верхнего уровня. Вложенные объекты (или массивы) внутри исходного объекта не копируются, а лишь передаются по ссылке.

Поверхностное копирование (Shallow Copy)

Рассмотрим пример с использованием оператора spread:

const original = {
  name: 'Test',
  details: { id: 1, value: 'secret' }
};

const shallowCopy = { ...original };
// Меняем свойство верхнего уровня — безопасно
shallowCopy.name = 'Changed';
console.log(original.name); // 'Test' — не изменилось

// Меняем вложенный объект — ОПАСНО!
shallowCopy.details.value = 'exposed';
console.log(original.details.value); // 'exposed' — изменилось и в original!

Как видно, изменение shallowCopy.details повлияло на original.details, потому что оба свойства хранят ссылку на один и тот же объект в памяти.

Глубокое копирование (Deep Copy)

Чтобы избежать этой проблемы, необходимо создать глубокую копию, где рекурсивно копируются все вложенные структуры. Есть несколько способов:

• structuredClone (современный, поддерживает многие типы):

  const deepCopy = structuredClone(original);
  deepCopy.details.value = 'safe';
  console.log(original.details.value); // 'secret' — исходный не тронут

• JSON.stringify/JSON.parse (работает с JSON-сериализуемыми данными, теряет функции, undefined, циклы):

  const deepCopy2 = JSON.parse(JSON.stringify(original));

• Библиотеки (например, Lodash _.cloneDeep).

Где это важно?

Понимание разницы критично в нескольких сценариях:

• Управление состоянием в React/Redux: состояние должно обновляться иммутабельно. Непреднамеренная мутация может привести к багам и неправильным ререндерам.
• Работа с конфигурациями или данными: когда нужно модифицировать копию объекта, не затрагивая исходные настройки.
• Функциональное программирование: функции, которые не должны иметь побочных эффектов (pure functions).

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