Почему spread не делает глубокую копию?

Оператор spread (три точки: ...) в JavaScript — это удобный синтаксис для быстрого создания копии массива или объекта. Однако важно понимать, что эта копия является поверхностной (shallow). Это означает, что копируются только значения примитивных типов (строки, числа, булевы значения, null, undefined, символы) и ссылки на объекты. Сам объект, на который указывает ссылка, не дублируется.

Как работает поверхностное копирование

Рассмотрим на примере объекта с вложенными данными:

const original = {
  name: 'Alice',
  address: { city: 'London', zip: 12345 }
};

const copy = { ...original };

// Изменяем примитивное свойство — безопасно
copy.name = 'Bob';
console.log(original.name); // 'Alice' (не изменилось)

// Изменяем вложенный объект — проблема!
copy.address.city = 'Paris';
console.log(original.address.city); // 'Paris' (изменилось!)

Как видно, свойство name изменилось только в копии, потому что это строка (примитив). А свойство address — это объект, и spread скопировал лишь ссылку на него. Теперь original.address и copy.address указывают на один и тот же объект в памяти.

Почему так сделано?

• Производительность: Глубокое копирование может быть ресурсоёмким для больших и сложных структур.
• Гибкость: Часто нужно именно поверхностное копирование, чтобы делиться данными между разными частями приложения.
• Семантика: Spread предназначен для быстрого создания нового объекта/массива на основе существующего, а не для полного клонирования.

Как сделать глубокую копию?

Для глубокого копирования можно использовать несколько подходов:

1. JSON методы (работает только с JSON-совместимыми данными, теряет функции, undefined, символы, циклические ссылки):

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

2. Рекурсивная функция, которая обходит все уровни вложенности.
3. Библиотеки, например, _.cloneDeep из Lodash или structuredClone (современный нативный метод).

Пример с structuredClone

Современные среды поддерживают глобальную функцию structuredClone для глубокого копирования:

const originalArray = [{ a: 1 }, { b: 2 }];
const deepCopyArray = structuredClone(originalArray);

deepCopyArray[0].a = 999;
console.log(originalArray[0].a); // 1 (не изменилось)

Вывод: Spread оператор отлично подходит для создания поверхностных копий, когда нужно быстро создать новый объект или массив, изменив несколько свойств верхнего уровня. Для полного, независимого копирования вложенных структур необходимо использовать методы глубокого копирования, такие как structuredClone или JSON.parse(JSON.stringify()), учитывая их ограничения.