Jaka jest różnica między płytką a głęboką kopią?

Question

Accepted Answer

Obiekty są przypisywane **przez referencję**, więc `b = a` nie kopiuje — oba wskazują na ten sam obiekt. Kopia **płytka** duplikuje poziom najwyższy, ale dzieli zagnieżdżone referencje; kopia **głęboka** duplikuje wszystko, w pełni niezależnie.

```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
```

Obiekt `address` zagnieżdżony to **ta sama referencja** w obu, więc jego mutacja wpływa na oba.

## Tworzenie głęboką kopią

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

Inne opcje i ich zastrzeżenia:

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

## Dlaczego to ważne

To główne źródło błędów "dlaczego mój stan zmienił się niespodziewanie?", zwłaszcza w React/Redux, gdzie nie wolno mutować stan.

Rozszczepienie działa dobrze, gdy zmienisz tylko pola najwyższego poziomu, ale w przypadku zagnieżdżonych aktualizacji musisz też skopiować poziom zagnieżdżony (`{ ...obj, address: { ...obj.address, city } }`) lub wykonać głęboką klonowanie.