Vad är skillnaden mellan en grund och en djup kopia?

Question

Accepted Answer

Objekt tilldelas **by reference**, så `b = a` kopierar inte — båda pekar på samma objekt. En **grund** kopia duplicerar toppnivån men delar kapslade referenser; en **djup** kopia duplicerar allt, helt oberoende.

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

Det kapslade `address`-objektet är **samma referens** i båda, så att mutera det påverkar båda.

## Gör en djup kopia

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

Andra alternativ och deras varningar:

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

## Varför det är viktigt

Detta är en toppkälla till "varför ändrades mitt state oväntat?" buggar, särskilt i React/Redux där du inte får mutera state.

Spread är bra när du bara ändrar toppnivåfält, men för kapslade uppdateringar måste du kopiera den kapslade nivån också (`{ ...obj, address: { ...obj.address, city } }`) eller gör en djup klon.