Come eseguire il deep clone di un oggetto JavaScript

 

Introduzione: cosa si intende per clone di un oggetto

In JavaScript, clonare un oggetto significa creare una copia indipendente dell’oggetto originale. A differenza di un'assegnazione che crea solo un riferimento all’oggetto, un clone è una nuova istanza con lo stesso contenuto. 

Il deep clone, in particolare, implica la duplicazione completa dell’oggetto, incluse tutte le sue proprietà annidate. Questo è essenziale quando si vuole modificare una copia senza alterare i dati originali.

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

1. Clonazione semplice con JSON.stringify

Un metodo molto usato per clonare oggetti è l’uso combinato di JSON.stringify() e JSON.parse(). Questo approccio funziona serializzando l’oggetto in una stringa JSON e poi deserializzandolo per ottenere una nuova copia.

const originale = { nome: "Mario", info: { età: 30 } };
const copia = JSON.parse(JSON.stringify(originale));

2. Problemi della clonazione con JSON.stringify

Questo metodo ha delle limitazioni importanti:

• Non gestisce correttamente tipi speciali come Date, Map, Set, undefined, Infinity, NaN o funzioni.
• Gli oggetti con riferimenti circolari causano un errore durante la serializzazione.
• Le classi personalizzate perdono i metodi e vengono convertite in oggetti plain.

const obj = { data: new Date(), saluto: () => "ciao" };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone.data instanceof Date); // false
console.log(clone.saluto); // undefined

3. Deep clone con structuredClone()

JavaScript moderno offre structuredClone(), una funzione nativa che effettua una clonazione profonda gestendo correttamente quasi tutti i tipi di dato.

const originale = { nome: "Mario", date: new Date(), numeri: [1, 2, 3] };
const copia = structuredClone(originale);

3.1 Compatibilità browser di structuredClone()

Supportato in:

• Chrome (da v98)
• Firefox (da v94)
• Safari (da v15.4)
• Edge (da v98)

3.2 Polyfill di structuredClone() per i browser non supportati

Un polyfill può essere utilizzato per simulare structuredClone() nei browser che non lo supportano. Uno dei metodi più affidabili sfrutta l’interfaccia MessageChannel.

Cos'è MessageChannel?

MessageChannel è una API che consente la comunicazione asincrona tra due porte (canali). Quando un oggetto viene inviato attraverso una porta, il browser esegue una clonazione strutturata dei dati, che possiamo sfruttare per implementare un clone profondo.

function structuredClonePolyfill(obj) {
  return new Promise((resolve, reject) => {
    const { port1, port2 } = new MessageChannel();
    port2.onmessage = (event) => resolve(event.data);
    try {
      port1.postMessage(obj);
    } catch (err) {
      reject(err);
    }
  });
}

Utilizzo:

structuredClonePolyfill(obj).then((clone) => {
  console.log(clone);
});

Nota: questo polyfill è asincrono e richiede un ambiente che supporti MessageChannel. Non è adatto per ambienti come Node.js senza librerie di supporto.

Conclusione: i vantaggi del clone nelle pratiche di programmazione

Clonare oggetti in modo sicuro è cruciale in molte pratiche moderne di sviluppo, specialmente in contesti immutabili come Redux o nella gestione dello stato nelle applicazioni web. 

Un deep clone garantisce che le modifiche non influenzino i dati originali, migliorando la prevedibilità e la manutenibilità del codice. 

Scegliere tra JSON.stringify e structuredClone() dipende dalle necessità di compatibilità e dalla complessità dell’oggetto.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment