Come clonare oggetto JavaScript: guida ed esempi

In questo articolo vedremo come clonare un oggetto in JavaScript.

Per prima cosa, vedremo quali i tipi di copia esistenti in JavaScript (spoiler: non è solo uno).

Quindi, proseguiremo illustrando le opzioni disponibili per effettuare la duplicazione di oggetti utilizzando JavaScript.

Indice

Copia oggetto JavaScript: shallow vs deep copy

Prima di procedere con la lettura, è necessario che tu sappia che esistono due modalità per copiare gli oggetti in JavaScript: la shallow copy e la deep copy.

Nel seguito dell’articolo troverai le definizioni e gli esempi per entrambe le modalità.

Duplicazione oggetto JavaScript: shallow copy

Una oggetto generato tramite una shallow copy è caratterizzato dal condividere i riferimenti con l’oggetto da cui è stato clonato.

In altre parole, se l’oggetto b è stato generato dall’oggetto a, entrambi avranno gli stessi indirizzi per le stesse proprietà.

Per chiarire questo concetto, riporto un semplice esempio pratico qui sotto.

const a = {
  animali: [ "cane", "gatto", "topo" ]
};
// creo una shallow copy
const b = {...a};
console.log(a.animali);
// verrà stampato [ "cane", "gatto", "topo" ]
b.animali.pop();
console.log(a.animali);
// verrà stampato [ "cane", "gatto" ];

Noterai che avendo modificato l’oggetto b, la modifica è stata riportata anche sull’oggetto a.

Questo perché internamente entrambi gli oggetti referenziano lo stesso array, poiché b è una shallow copy di a.

Clonazione oggetto JavaScript: deep copy

Un oggetto generato tramite deep copy non condivide le referenze con l’oggetto da qui è stato copiato.

Riporto l’esempio fatto in precedenza per farti capire cosa determini la differenza tra shallow copy e deep copy.

const c = {
  animali: [ "cane", "gatto", "topo" ]
};
// creo una deep copy
const d = structuredClone(c);
console.log(c.animali);
// verrà stampato [ "cane", "gatto", "topo" ]
d.animali.pop();
console.log(c.animali);
// verrà stampato [ "cane", "gatto", "topo" ];

Noterai che, a differenza dell’esempio proposto in shallow copy, la modifica operata sull’oggetto d non ha avuto impatti sull’oggetto c.