Care este diferența dintre o copie superficială și o copie profundă?

Question

Accepted Answer

Obiectele sunt atribuite **prin referință**, deci `b = a` nu copiază — ambele indică același obiect. O copie **superficială** duplică nivelul superior dar partajează referințe imbricate; o copie **profundă** duplică totul, complet independent.

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

Obiectul `address` imbricat este **aceeași referință** în ambele, deci mutarea lui afectează pe ambele.

## Realizarea unei copii profunde

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

Alte opțiuni și avertismentele lor:

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

## De ce este important

Aceasta este o sursă principală a bug-urilor "de ce s-a schimbat starea mea neașteptat?", mai ales în React/Redux unde nu trebuie să muți starea.

Spread este bun când schimbi doar câmpuri de nivel superior, dar pentru actualizări imbricate trebuie să copiezi și nivelul imbricat (`{ ...obj, address: { ...obj.address, city } }`) sau să faci un clone profund.