Come clonare correttamente un oggetto in JavaScript: se non sai come fare rischi di trovarti l’oggetto clonato con proprietà alterate, e in questo articolo scopriamo come evitarlo.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Immagina di avere l’oggetto x e di clonarlo, quindi crearne una copia identica al 100% che chiameremo y.
Qual è il problemaccio che di solito avviene in questa operazione?
Che purtroppo l’oggetto x subirà delle modifiche non appena queste saranno applicate all’oggetto y.
Assurda questa cosa vero? Come se in qualche modo questi… Fratelli fossero connessi!
Insomma, ammetto che ci sia poco tecnichese nella mia spiegazione, ma sono quasi sicuro che ti sarà capitato almeno una volta programmando in JavaScript 😛
“Insomma Lorenzo che devo fare per evitarlo?”
Cerchiamo di capirlo assieme.
Sua Altezza Valore per Referenza
Il vero problema che noi dobbiamo affrontare è proprio questo.
In Javascript gli oggetti sono referenziati per valore.
E no, non c’è nessun Signor Valore che fa da referenza per loro.
Battute a parte, questo significa (purtroppo), che non possiamo semplicemente clonare un oggetto in JavaScript tramite l’operatore “=”.
“Ma Lorenzo che cosa succede di preciso se lo faccio?”
Facciamo un piccolo esempio:
const persona1 = { nome: "Pippo", cognome: "Baudo" };
const persona2 = persona1;
console.log(persona1, persona2); // { nome: "Pippo", cognome: "Baudo" }; { nome: "Pippo", cognome: "Baudo" };
E fin qua dirai “Vabbeh grazie al ca…”.
Ma guarda un po’ cosa succede se proseguiamo col codice di prima:
persona2.soldi = 42069;
console.log(persona2); // { nome: "Pippo", cognome: "Baudo", soldi: 42069 };
console.log(persona1); // { nome: "Pippo", cognome: "Baudo", soldi: 42069 };
Insomma, qualquadra qua non cosa in questa clonazione di oggetti.
Questo è il potere del referenziare gli oggetti per valore, che in linguaggio meno tecnichese significa molto semplicemente:
“Se altero l’oggetto padre, il figlio subirà le stesse identiche modifiche”
In parole molto semplici, quando usiamo l’operatore “=” per clonare un oggetto, stiamo letteralmente copiaincollando il contenuto nella memoria.
E siccome il puntatore a questa parte di memoria è pressoché lo stesso il risultato è quello che abbiamo appena finito di vedere!
Ora che abbiamo capito come NON correttamente un oggetto in JavaScript, vediamo come clonarlo correttamente.
Usiamo lo spread
Lasciamo la finanza a parte per un momento.
Spread è un operatore che ci permette di ri-assemblare l’oggetto che vogliamo clonare, ma creandone una copia indipendente.
Come? Così:
const persona1 = { nome: "Pippo", cognome: "Baudo" };
const persona2 = { ...persona1 };
Purtroppo spread ha un piccolo problema: è necessario allo stato attuale usare Babel per compilare il codice.
Ma non demordiamo e scopriamo altri modi per clonare i nostri oggetti senza problemi.
Habemus “Object.assign”
A differenza dell’operatore spread, il metodo “assign” della classe “Object” è ufficialmente rilasciato, di conseguenza non abbiamo bisogno di alcun compilatore aggiuntivo per clonare correttamente un oggetto.
E funziona, pressappoco così:
const persona1 = { nome: "Pippo", cognome: "Baudo" };
const persona2 = Object.assign({}, persona1);
Semplice, immediato, quadrato, pratico, buono!
… Ok la pianto: andiamo all’ultima frontiera.
Usare il JSON per clonare un oggetto
“Lorenzo ma ti sei fumato il Vinavil?”
No.
È un modo abbastanza “zozzo”, ma pratico, semplice e immediato per clonare correttamente un oggetto JavaScript senza dover diventare scemi:
const persona1 = { nome: "Pippo", cognome: "Baudo" };
const persona2 = JSON.parse(JSON.stringify(persona1));
Diciamo che è un po’ “scemo” il metodo in sé.
JSON va a creare un’istanza stringa di un nuovo oggetto, di conseguenza la clonazione va a creare due istanze totalmente distinte e indipendenti degli oggetti in questione.
