Qual è la differenza tra una copia superficiale e una copia profonda?

Question

Accepted Answer

Gli oggetti vengono assegnati **per riferimento**, quindi `b = a` non copia — entrambi puntano allo stesso oggetto. Una copia **superficiale** duplica il livello superiore ma condivide i riferimenti annidati; una copia **profonda** duplica tutto, completamente indipendente.

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

L'oggetto annidato `address` è lo **stesso riferimento** in entrambi, quindi mutarlo incide su entrambi.

## Creazione di una copia profonda

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

Altre opzioni e relative avvertenze:

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

## Perché è importante

Questa è una fonte principale di bug "perché il mio stato è cambiato inaspettatamente?", specialmente in React/Redux dove non devi mutare lo stato.

Lo spread va bene quando cambi solo i campi di livello superiore, ma per gli aggiornamenti annidati devi copiare anche il livello annidato (`{ ...obj, address: { ...obj.address, city } }`) o fare un clone profondo.