Jaký je rozdíl mezi mělkou a hlubokou kopií?

Question

Accepted Answer

Objekty se přiřazují **podle reference**, takže `b = a` nekopíruje — oba ukazují na stejný objekt. **Mělká** kopie duplikuje nejvyšší úroveň, ale sdílí vnořené reference; **hluboká** kopie duplikuje všechno, plně nezávislé.

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

Vnořený objekt `address` je **stejná reference** v obou, takže jeho mutace ovlivňuje oba.

## Vytvoření hluboké kopie

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

Další možnosti a jejich varování:

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

## Proč na tom záleží

Toto je hlavní zdroj chyb typu "proč se můj stav neočekávaně změnil?", zejména v React/Redux, kde nesmíte mutovat stav.

Spread je v pořádku, když měníte pouze pole na nejvyšší úrovni, ale pro vnořené aktualizace musíte také kopírovat vnořenou úroveň (`{ ...obj, address: { ...obj.address, city } }`) nebo provést hluboké klonování.