Was ist der Unterschied zwischen einer flachen und einer tiefen Kopie?

Question

Accepted Answer

Objekte werden **by reference** zugewiesen, daher kopiert `b = a` nicht — beide verweisen auf dasselbe Objekt. Eine **flache** Kopie dupliziert die oberste Ebene, teilt aber verschachtelte Referenzen; eine **tiefe** Kopie dupliziert alles, völlig unabhängig.

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

Das verschachtelte `address`-Objekt ist die **gleiche Referenz** in beiden, daher beeinflusst die Mutation es beide.

## Erstellen einer tiefen Kopie

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

Andere Optionen und deren Vorbehalte:

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

## Warum es wichtig ist

Dies ist eine Top-Quelle für "Warum hat sich mein State unerwartet geändert?"-Fehler, besonders in React/Redux, wo du den State nicht mutieren darfst.

Spread ist in Ordnung, wenn du nur Top-Level-Felder änderst, aber für verschachtelte Updates musst du auch die verschachtelte Ebene kopieren (`{ ...obj, address: { ...obj.address, city } }`) oder einen Deep Clone durchführen.