Wat is het verschil tussen een oppervlakkige en een diepe kopie?

Question

Accepted Answer

Objecten worden **op referentie** toegewezen, dus `b = a` kopieert niet — beide verwijzen naar hetzelfde object. Een **oppervlakkige kopie** dupliceert het bovenste niveau maar deelt geneste referenties; een **diepe kopie** dupliceert alles, volledig onafhankelijk.

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

Het geneste `address` object is dezelfde **referentie** in beide, dus het muteren ervan beïnvloedt beide.

## Een diepe kopie maken

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

Andere opties en hun voorbehouden:

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

## Waarom het belangrijk is

Dit is een topbron van "waarom is mijn state onverwachts gewijzigd?" bugs, vooral in React/Redux waar je state niet mag muteren.

Spread is prima wanneer je alleen velden op het hoogste niveau wijzigt, maar voor geneste updates moet je ook het geneste niveau kopiëren (`{ ...obj, address: { ...obj.address, city } }`) of een diepe clone uitvoeren.