Shallow Copy vs Deep Copy in JavaScript

JavaScript gestisce la copia in due modi, a seconda del tipo di dato.

Valori Primitivi (Copia per Valore) I tipi primitivi includono stringhe, numeri, booleani, symbol, bigInt e null. Quando copi un primitivo, JavaScript crea una nuova versione indipendente in memoria.

Esempio: let a = 10; let b = a; b = 20; Risultato: a rimane 10.

Valori Non Primitivi (Copia per Riferimento) Oggetti e array funzionano in modo diverso. Utilizzano dei riferimenti. Quando copi un oggetto, copi solo il puntatore alla sua posizione in memoria.

Esempio: let original = { name: "YOO" }; let copy = original; copy.name = "NEW"; Risultato: original.name è ora "NEW".

La Differenza: Shallow vs Deep

Una shallow copy copia il livello superiore di un oggetto. Se l'oggetto contiene oggetti annidati, essa punterà ancora ai riferimenti annidati originali. Una deep copy crea un oggetto completamente nuovo con tutti i valori nuovi.

Immaginalo come una pizza:

  • Shallow Copy: Tu e un amico condividete una pizza. Se il tuo amico mangia una fetta, la pizza diventa più piccola anche per te.
  • Deep Copy: Entrambi avete le vostre pizze separate. Se il tuo amico mangia una fetta, la tua pizza rimane la stessa.

Metodo Shallow Copy Puoi usare l'operatore spread (...) per effettuare una shallow copy.

let original = { name: "YOO", details: { age: 22 } }; let copy = { ...original };

Attenzione: Se modifichi original.details.age, anche copy.details.age cambierà. Questa è la trappola della shallow copy.

Metodi Deep Copy

  1. structuredClone() Questa è una funzione integrata nei browser moderni e in Node.js. Gestisce perfettamente le strutture annidate.

Pro:

  • Veloce e nativa.
  • Gestisce Date, RegExp e Map.

Contro:

  • Fallisce se l'oggetto contiene funzioni o nodi DOM.
  1. JSON.parse(JSON.stringify()) Questo è un vecchio trucco che consiste nel trasformare un oggetto in una stringa e poi di nuovo in un oggetto.

Perché evitarlo:

  • Perde dati come undefined, Map, Set o Infinity.
  • Può corrompere determinati valori.

Fonte: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5