В чём различие между поверхностной и глубокой копией?

Question

Accepted Answer

Объекты присваиваются **по ссылке**, поэтому `b = a` не копирует — оба указывают на один и тот же объект. **Поверхностная** копия дублирует верхний уровень, но делится вложенными ссылками; **глубокая** копия дублирует всё, полностью независимо.

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ independent (top-level primitive)
shallow.address.city = "LA";     // ⚠️ ALSO changes original.address.city — shared!

original.address.city; // "LA"  ← mutated through the shallow copy
```

Вложенный объект `address` — это **одна и та же ссылка** в обоих случаях, поэтому его изменение влияет на оба.

## Создание глубокой копии

```js
const deep = structuredClone(original); // modern, built-in, handles most types
deep.address.city = "Chicago";          // ✅ original is untouched
```

Другие варианты и их оговорки:

```js
JSON.parse(JSON.stringify(obj)); // simple, but LOSES functions, Dates → strings, undefined
// lodash: _.cloneDeep(obj)       // robust, for complex cases
```

## Почему это важно

Это главный источник ошибок «почему моё состояние неожиданно изменилось?», особенно в React/Redux, где вы не должны мутировать состояние.

Спред работает хорошо, когда вы изменяете только поля верхнего уровня, но для вложенных обновлений вы также должны скопировать вложенный уровень (`{ ...obj, address: { ...obj.address, city } }`) или выполнить глубокое клонирование.