Копирование объектов: поверхностное и глубокое

Переменная не хранит объект целиком — она хранит ссылку на него, адрес коробки на складе. Присваивание переписывает адрес в новую переменную, а склад остаётся один. Поэтому две переменные могут смотреть на один и тот же объект и мешать друг другу.

const user = { name: "Аня", age: 25 };
const copy = user;
copy.age = 26;
console.log(user.age);
console.log(user === copy);

С примитивами такого не бывает: let b = a для числа или строки даёт независимое значение. Объекты, массивы и функции — другое дело, и === для них отвечает не «одинаковое ли содержимое», а «один ли это объект».

Чтобы получить новый объект, его нужно создать явно и переложить в него свойства. Короткий способ — spread-синтаксис { ...obj }: он создаёт свежий объект и копирует в него все свои перечисляемые свойства исходного.

const user = { name: "Аня", age: 25 };
const clone = { ...user };
clone.age = 26;
console.log(user.age);
console.log(user === clone);

Object.assign(target, ...sources) делает то же самое, но пишет в существующий объект и возвращает его. Он удобен, когда нужно слить несколько источников: свойства правых источников перекрывают левые. Первым аргументом почти всегда стоит пустой {} — иначе вы мутируете чужой объект.

const defaults = { theme: "light", lang: "ru" };
const settings = Object.assign({}, defaults, { theme: "dark" });
console.log(settings.theme);
console.log(defaults.theme);

Копия через spread — всегда обычный объект. Прототип не переносится: скопировав экземпляр класса, вы получите набор данных без методов.

Обе конструкции копируют значения свойств. Если значение — число или строка, копия независима. Если значение — объект, то копируется ссылка на него, и вложенный объект оказывается общим у оригинала и копии. Это и называется поверхностным копированием: свежий только верхний этаж.

const user = { name: "Аня", sizes: { height: 170 } };
const clone = { ...user };
clone.sizes.height = 180;
console.log(user.sizes.height);
console.log(user.sizes === clone.sizes);

Такие баги самые неприятные: код выглядит правильно, объект «скопирован», а правка в одном месте всплывает в другом через неделю. Как только в объекте появляется вложенность, нужно осознанно решить — вам хватит поверхностной копии или требуется глубокая.

const user = { age: 25 };
user.age = 26;
console.log(user.age);

Глубокая копия — это копия объекта вместе со всем содержимым на всех уровнях. Раньше её приходилось писать руками или тащить lodash, теперь в браузерах и Node есть встроенная функция structuredClone(value). Что ещё из lodash забрала себе платформа и когда маленькая библиотека утилит всё-таки нужна — на полке браузера в части II.

const user = { name: "Аня", sizes: { height: 170 } };
const clone = structuredClone(user);
clone.sizes.height = 180;
console.log(user.sizes.height);
console.log(clone.sizes.height);

Она умеет то, обо что спотыкаются самодельные рекурсии: правильно копирует Date, Map, Set, массивы и типизированные массивы, а циклические ссылки не зацикливают её, а переносятся в копию как циклы. Единственное серьёзное ограничение — функции и DOM-узлы скопировать нельзя, на них будет ошибка DataCloneError.

const user = { name: "Аня" };
user.self = user; // объект ссылается сам на себя
const clone = structuredClone(user);
console.log(clone.self === clone);
console.log(clone.self === user);

function deepCopy(v) {
  if (v === null || typeof v !== "object") return v;
  const out = Array.isArray(v) ? [] : {};
  for (const k of Object.keys(v)) out[k] = deepCopy(v[k]);
  return out;
}
const src = { a: { b: 1 } };
deepCopy(src).a.b = 2;
console.log(src.a.b);

Старый народный приём: превратить объект в JSON-строку и разобрать обратно — JSON.parse(JSON.stringify(obj)). Глубокая копия действительно получается, но по дороге объект проходит через формат, который знает только строки, числа, булевы значения, null, массивы и простые объекты. Всё остальное теряется молча.

const data = { n: 1, when: new Date(0), greet: () => 1, nothing: undefined };
const clone = JSON.parse(JSON.stringify(data));
console.log(typeof clone.when);
console.log("greet" in clone);
console.log("nothing" in clone);

Плюс на циклической ссылке этот приём просто падает с ошибкой. Вывод простой: для чистых данных с сервера он допустим, во всех остальных случаях берите structuredClone.