{"id":841,"date":"2018-06-28T07:11:00","date_gmt":"2018-06-28T05:11:00","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/perche-la-mutazione-fa-paura\/"},"modified":"2018-06-28T07:11:00","modified_gmt":"2018-06-28T05:11:00","slug":"perche-la-mutazione-fa-paura","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/perche-la-mutazione-fa-paura\/","title":{"rendered":"Perch\u00e9 la mutazione fa paura"},"content":{"rendered":"
\n

Nota degli editori:<\/b> Questo articolo contiene delle lezioni esempio tratte da Learn JavaScript<\/a>, un corso che vi aiuta a imparare JavaScript per realizzare da zero dei component per il mondo reale.<\/p>\n<\/div>\n

Mutare<\/i> significa cambiare forma o natura. Qualcosa che \u00e8 mutabile pu\u00f2 essere cambiato mentre qualcosa che \u00e8 immutabile non pu\u00f2 cambiare. Per comprendere la mutazione, pensate agli X-Men. In X-Men, le persone possono improvvisamente assumere dei poteri. Il problema \u00e8 che non sapete quando emergeranno questi poteri. Immaginatevi il vostro amico che diventa blu e che tutto a un tratto ha la pelliccia: pu\u00f2 essere spaventoso, vero?<\/p>\n

In JavaScript, c’\u00e8 questo stesso problema della mutazione. Se il vostro codice \u00e8 mutabile, potreste cambiare (e rompere) qualcosa senza saperlo.<\/p>\n

\n

In JavaScript, gli oggetti sono mutabili<\/h2>\n

In JavaScript, potete aggiungere delle propriet\u00e0 a un oggetto. Quando lo fate dopo averlo istanziato, l’oggetto \u00e8 cambiato per sempre. Muta, come muta un membro degli X-Men quando guadagna un potere.<\/p>\n

Nell’esempio seguente, la variabile egg<\/code> muta quando gli si aggiunge la propriet\u00e0 isBroken<\/code>. Diciamo che gli oggetti (come egg<\/code>) sono mutabili (hanno la capacit\u00e0 di mutare<\/i>).<\/p>\n

const egg =<\/span> {<\/span> name:<\/span> \"Humpty Dumpty\"<\/span> }<\/span>;<\/span>\negg.<\/span>isBroken =<\/span> false<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>egg)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   name: \"Humpty Dumpty\",\n<\/span>\/\/   isBroken: false\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
La mutazione \u00e8 piuttosto normale in JavaScript. La usate sempre.<\/p>\n
Ecco quando la mutazione diventa spaventosa.<\/strong><\/p>\n
Supponiamo di creare una constant variable chiamata newEgg<\/code> e le assegnamo egg<\/code>. Poi vogliamo cambiare il nome di newEgg<\/code> con qualcosa d’altro.<\/p>\n
const egg =<\/span> {<\/span> name:<\/span> \"Humpty Dumpty\"<\/span> }<\/span>;<\/span>\n\nconst newEgg =<\/span> egg;<\/span>\nnewEgg.<\/span>name =<\/span> \"Errr ... Not Humpty Dumpty\"<\/span>;<\/span><\/code><\/pre>\n
Quando cambiate (mutate) newEgg<\/code>, sapevate che egg<\/code> viene mutato automaticamente?<\/p>\n
console.<\/span>log(<\/span>egg)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   name: \"Errr ... Not Humpty Dumpty\"\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
L’esempio precedente illustra perch\u00e9 la mutazione pu\u00f2 fare paura: quando cambiate un pezzo del vostro codice, un altro pezzo pu\u00f2 cambiare da un’altra parte senza che lo sappiate. Come risultato, otterrete dei bug difficili da tracciare e sistemare.<\/p>\n
Questo strano comportamento avviene perch\u00e9 in JavaScrip gli oggetti vengono passati per riferimento.<\/p>\n
In JavaScript gli oggetti sono passati per riferimento<\/h3>\n
Per capire cosa significa \u201cpassato per riferimento\u201d, per prima cosa dovete capire che ogni oggetto ha un’identit\u00e0 unica in JavaScript. Quando assegnate un oggetto a una variabile, collegate la variabile all’identit\u00e0 dell’oggetto (ossia, la passate per riferimento) piuttosto che assegnare la variabile direttamente al valore dell’oggetto. Questo \u00e8 il motivo per cui quando confrontate due oggetti diversi, ottenete false<\/code> anche se gli oggetti hanno lo stesso valore.<\/p>\n
console.<\/span>log(<\/span>{<\/span>}<\/span> ==<\/span>=<\/span> {<\/span>}<\/span>)<\/span>;<\/span> \/\/ false<\/span><\/code><\/pre>\n
Quando assegnate egg<\/code> a newEgg<\/code>, newEgg<\/code> punta allo stesso oggetto di egg<\/code>. Dal momento che egg<\/code> e newEgg<\/code> sono la stessa cosa, quando cambiate newEgg<\/code>, egg<\/code> viene cambiato automaticamente.<\/p>\n
console.<\/span>log(<\/span>egg ==<\/span>=<\/span> newEgg)<\/span>;<\/span> \/\/ true<\/span><\/code><\/pre>\n
Sfortunatamente, la maggior parte delle volte, non vorrete che egg<\/code> cambi con newEgg<\/code>, dal momento che causa la rottura del vostro codice quanto meno ve lo aspettereste. Quindi, come evitiamo che gli oggetti mutino? Prima di comprendere come prevenire la mutazione degli oggetti, dovete sapere cosa \u00e8 immutabile in JavaScript.<\/p>\n<\/div>\n
\n
I primitivi sono immutabili in JavaScript<\/h2>\n
In JavaScript, i primitivi (String, Number, Boolean, Null, Undefined e Symbol) sono immutabili: non potete cambiare la struttura (aggiungere propriet\u00e0 o metodi) di un primitivo. Non succede nulla anche se cercate di aggiungere propriet\u00e0 a un primitivo.<\/p>\n
const egg =<\/span> \"Humpty Dumpty\"<\/span>;<\/span>\negg.<\/span>isBroken =<\/span> false<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>egg)<\/span>;<\/span> \/\/ Humpty Dumpty\n<\/span>console.<\/span>log(<\/span>egg.<\/span>isBroken)<\/span>;<\/span> \/\/ undefined<\/span><\/code><\/pre>\n<\/div>\n
\n
const<\/code> non garantisce l’immutabilit\u00e0<\/h2>\n
Molte persone pensano che le variabili dichiarate con const<\/code> siano immutabili. Questa \u00e8 una supposizione incorretta.<\/p>\n
Dichiarare una variabile con const<\/code> non la rende immutabile: impedisce che gli assegniate un altro valore.<\/p>\n
const myName =<\/span> \"Zell\"<\/span>;<\/span>\nmyName =<\/span> \"Triceratops\"<\/span>;<\/span>\n\/\/ ERROR<\/span><\/code><\/pre>\n
Quando dichiarate un oggetto con const<\/code>, vi \u00e8 ancora permesso far mutare l’oggetto. Nell’esempio egg<\/code> precedente, anche se egg<\/code> \u00e8 creato con const<\/code>, const<\/code> non impedisce che egg<\/code> muti.<\/p>\n
const egg =<\/span> {<\/span> name:<\/span> \"Humpty Dumpty\"<\/span> }<\/span>;<\/span>\negg.<\/span>isBroken =<\/span> false<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>egg)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   name: \"Humpty Dumpty\",\n<\/span>\/\/   isBroken: false\n<\/span>\/\/ }<\/span><\/code><\/pre>\n<\/div>\n
\n
Impedire che gli oggetti mutino<\/h2>\n
Potete usare Object.assign<\/code> e assignment per impedire che gli oggetti mutino.<\/p>\n
Object.assign<\/code><\/h3>\n
Object.assign<\/code> vi permette di combinare due (o pi\u00f9) oggetti insieme in uno singolo. Ha la sintassi seguente:<\/p>\n
const newObject =<\/span> Object.<\/span>assign(<\/span>object1,<\/span> object2,<\/span> object3,<\/span> object4)<\/span>;<\/span><\/code><\/pre>\n
newObject<\/code> conterr\u00e0 delle propriet\u00e0 da tutti gli oggetti che avete passato in Object.assign<\/code>.<\/p>\n
const papayaBlender =<\/span> {<\/span> canBlendPapaya:<\/span> true<\/span> }<\/span>;<\/span>\nconst mangoBlender =<\/span> {<\/span> canBlendMango:<\/span> true<\/span> }<\/span>;<\/span>\n\nconst fruitBlender =<\/span> Object.<\/span>assign(<\/span>papayaBlender,<\/span> mangoBlender)<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>fruitBlender)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   canBlendPapaya: true,\n<\/span>\/\/   canBlendMango: true\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
Se si trovano due propriet\u00e0 in contrasto, la propriet\u00e0 in un oggetto seguente sovrascrive la propriet\u00e0 in un oggetto precedente (nei parametri di Object.assign<\/code> parameters).<\/p>\n
const smallCupWithEar =<\/span> {<\/span>\n  volume:<\/span> 300<\/span>,<\/span>\n  hasEar:<\/span> true<\/span>\n}<\/span>;<\/span>\n\nconst largeCup =<\/span> {<\/span> volume:<\/span> 500<\/span> }<\/span>;<\/span>\n\n\/\/ In this case, volume gets overwritten from 300 to 500\n<\/span>const myIdealCup =<\/span> Object.<\/span>assign(<\/span>smallCupWithEar,<\/span> largeCup)<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>myIdealCup)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   volume: 500,\n<\/span>\/\/   hasEar: true\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
Ma attenzione! Quando combinate due oggetti con Object.assign<\/code>, il primo oggetto viene mutato. Altri oggetti non vengono mutati.<\/strong><\/p>\n
console.<\/span>log(<\/span>smallCupWithEar)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   volume: 500,\n<\/span>\/\/   hasEar: true\n<\/span>\/\/ }\n<\/span>\nconsole.<\/span>log(<\/span>largeCup)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   volume: 500\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
Risolvere il problema di mutazione di Object.assign<\/code><\/h3>\n
Potete passare un nuovo oggetto come vostro primo oggetto per impedire che gli oggetti esistenti mutino. Muterete ancora il primo oggetto per\u00f2 (l’oggetto vuoto), ma va bene perch\u00e9 questa mutazione non interessa null’altro.<\/p>\n
const smallCupWithEar =<\/span> {<\/span>\n  volume:<\/span> 300<\/span>,<\/span>\n  hasEar:<\/span> true<\/span>\n}<\/span>;<\/span>\n\nconst largeCup =<\/span> {<\/span>\n  volume:<\/span> 500<\/span>\n}<\/span>;<\/span>\n\n\/\/ Using a new object as the first argument\n<\/span>const myIdealCup =<\/span> Object.<\/span>assign(<\/span>{<\/span>}<\/span>,<\/span> smallCupWithEar,<\/span> largeCup)<\/span>;<\/span><\/code><\/pre>\n
Potete mutare il vostro nuovo oggetto in qualunque modo vogliate d’ora in poi. Non interesser\u00e0 nessuno dei vostri oggetti precedenti.<\/p>\n
myIdealCup.<\/span>picture =<\/span> \"Mickey Mouse\"<\/span>;<\/span>\nconsole.<\/span>log(<\/span>myIdealCup)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   volume: 500,\n<\/span>\/\/   hasEar: true,\n<\/span>\/\/   picture: \"Mickey Mouse\"\n<\/span>\/\/ }\n<\/span>\n\/\/ smallCupWithEar doesn't get mutated\n<\/span>console.<\/span>log(<\/span>smallCupWithEar)<\/span>;<\/span> \/\/ { volume: 300, hasEar: true }\n<\/span>\n\/\/ largeCup doesn't get mutated\n<\/span>console.<\/span>log(<\/span>largeCup)<\/span>;<\/span> \/\/ { volume: 500 }<\/span><\/code><\/pre>\n
Ma Object.assign<\/code> copia i riferimenti agli oggetti<\/h3>\n
Il problema di Object.assign<\/code> \u00e8 che fa uno shallow merge<\/i>: copia le propriet\u00e0 direttamente da un oggetto all’altro. Quando lo fa, copia anche i riferimenti a qualsiasi oggetto.<\/p>\n
Spieghiamo questa affermazione con un esempio.<\/p>\n
Supponiamo che compriate un nuovo sound system. Il sistema vi permette di dichiarare se l’alimentazione \u00e8 accesa. Vi permette anche di impostare il volume, la quantit\u00e0 di bassi e altre opzioni.<\/p>\n
const defaultSettings =<\/span> {<\/span>\n  power:<\/span> true<\/span>,<\/span>\n  soundSettings:<\/span> {<\/span>\n    volume:<\/span> 50<\/span>,<\/span>\n    bass:<\/span> 20<\/span>,<\/span>\n    \/\/ other options\n<\/span>  }<\/span>\n}<\/span>;<\/span><\/code><\/pre>\n
A qualche vostro amico piace la musica rumorosa, quindi decidete di creare un preset che di sicuro sveglier\u00e0 i vostri vicini quando dormono.<\/p>\n
const loudPreset =<\/span> {<\/span>\n  soundSettings:<\/span> {<\/span>\n    volume:<\/span> 100<\/span>\n  }<\/span>\n}<\/span>;<\/span><\/code><\/pre>\n
Poi invitate i vostri amici per una festa. Per preservare i vostri preset esistenti, cercate di combinare il preset rumoroso con quello di default.<\/p>\n
const partyPreset =<\/span> Object.<\/span>assign(<\/span>{<\/span>}<\/span>,<\/span> defaultSettings,<\/span> loudPreset)<\/span>;<\/span><\/code><\/pre>\n
Ma partyPreset<\/code> suona strano: il volume \u00e8 sufficientemente alto ma i bassi sono inesistenti. Quando ispezionate partyPreset<\/code>, siete sorpresi di non trovarci alcun basso!<\/p>\n
console.<\/span>log(<\/span>partyPreset)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   power: true,\n<\/span>\/\/   soundSettings: {\n<\/span>\/\/     volume: 100\n<\/span>\/\/   }\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
Questo succede perch\u00e9 JavaScript copia il riferimento all’oggetto soundSettings<\/code>. Dal momento che sia defaultSettings<\/code> sia loudPreset<\/code> hanno un oggetto soundSettings<\/code>, quello che viene dopo viene copiato nel nuovo oggetto.<\/p>\n
Se cambiate partyPreset<\/code>, loudPreset<\/code> muter\u00e0 di conseguenza: prova del fatto che il riferimento a soundSettings<\/code> viene copiato.<\/p>\n
partyPreset.<\/span>soundSettings.<\/span>bass =<\/span> 50<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>loudPreset)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   soundSettings: {\n<\/span>\/\/     volume: 100,\n<\/span>\/\/     bass: 50\n<\/span>\/\/   }\n<\/span>\/\/ }\n<\/span><\/code><\/pre>\n
Dal momento che Object.assign<\/code> fa uno shallow merge, dovete usare un altro metodo per fare il merge degli oggetti che contengono delle propriet\u00e0 annidate (ossia, oggetti all’interno di oggetti).<\/p>\n
Entra in scena assignment.<\/p>\n
assignment<\/h3>\n
assignment<\/a> \u00e8 una piccola libreria creata da Nicol\u00e1s Bevacqua<\/a> di Pony Foo<\/a>, un’ottima fonte di conoscenza JavaScript. Vi aiuta a fare un deep merge senza dovervi preoccupare della mutazione. A parte il nome del metodo, la sintassi \u00e8 la stessa di Object.assign<\/code>.<\/p>\n
\/\/ Perform a deep merge with assignment\n<\/span>const partyPreset =<\/span> assignment(<\/span>{<\/span>}<\/span>,<\/span> defaultSettings,<\/span> loudPreset)<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>partyPreset)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   power: true,\n<\/span>\/\/   soundSettings: {\n<\/span>\/\/     volume: 100,\n<\/span>\/\/     bass: 20\n<\/span>\/\/   }\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
assignment copia i valori di tutti gli oggetti annidati, il che impedisce agli oggetti esistenti di venir mutati.<\/p>\n
Se cercate di cambiare una qualsiasi propriet\u00e0 in partyPreset.soundSettings<\/code> adesso, vedrete che loudPreset<\/code> rimarr\u00e0 com’era.<\/p>\n
partyPreset.<\/span>soundSettings.<\/span>bass =<\/span> 50<\/span>;<\/span>\n\n\/\/ loudPreset doesn't get mutated\n<\/span>console.<\/span>log(<\/span>loudPreset)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   soundSettings {\n<\/span>\/\/     volume: 100\n<\/span>\/\/   }\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
Dovete sempre usare assignment invece di Object.assign<\/code>?<\/h3>\n
Fintanto che sapete come impedire che i vostri oggetti mutino, potete usare Object.assign<\/code>. Non ci sono conseguenze nell’usarlo fintanto che sapete come usarlo in maniera appropriata.<\/p>\n
Tuttavia, se dovete assegnare oggetti con propriet\u00e0 annidate, preferite sempre un deep merge a Object.assign<\/code>.<\/p>\n
Assicurarsi che gli oggetti non mutino<\/h3>\n
Sebbene i metodi citati possano aiutarvi a prevenire le mutazioni degli oggetti, non garantiscono che gli oggetti non mutino. Se avete fatto un errore e avete usato Object.assign<\/code> per un oggetto annidato, avrete dei problemi in seguito.<\/p>\n
Per tutelarvi, potreste voler garantire che gli oggetti non subiscano alcuna mutazione. Per farlo, potete usare librerie come ImmutableJS<\/a>. Questa libreria d\u00e0 un errore ogni volta che cercate di mutare un oggetto.<\/p>\n
In alternativa, potete usare Object.freeze<\/code> e deep-freeze. Questi due metodi fanno un fail silenzioso (nessun throw error, ma non mutano nemmeno gli oggetti).<\/p>\n
Object.freeze<\/code> e deep-freeze<\/h3>\n
Object.freeze<\/code> impedisce che le propriet\u00e0 dirette di un oggetto cambino.<\/p>\n
const egg =<\/span> {<\/span>\n  name:<\/span> \"Humpty Dumpty\"<\/span>,<\/span>\n  isBroken:<\/span> false<\/span>\n}<\/span>;<\/span>\n\n\/\/ Freezes the egg\n<\/span>Object.<\/span>freeze(<\/span>egg)<\/span>;<\/span>\n\n\/\/ Attempting to change properties will silently fail\n<\/span>egg.<\/span>isBroken =<\/span> true<\/span>;<\/span>\n\nconsole.<\/span>log(<\/span>egg)<\/span>;<\/span> \/\/ { name: \"Humpty Dumpty\", isBroken: false }<\/span><\/code><\/pre>\n
Ma non aiuta quando mutate una propriet\u00e0 pi\u00f9 profonda come defaultSettings.soundSettings.base<\/code>.<\/p>\n
const defaultSettings =<\/span> {<\/span>\n  power:<\/span> true<\/span>,<\/span>\n  soundSettings:<\/span> {<\/span>\n    volume:<\/span> 50<\/span>,<\/span>\n    bass:<\/span> 20<\/span>\n  }<\/span>\n}<\/span>;<\/span>\nObject.<\/span>freeze(<\/span>defaultSettings)<\/span>;<\/span>\ndefaultSettings.<\/span>soundSettings.<\/span>bass =<\/span> 100<\/span>;<\/span>\n\n\/\/ soundSettings gets mutated nevertheless\n<\/span>console.<\/span>log(<\/span>defaultSettings)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   power: true,\n<\/span>\/\/   soundSettings: {\n<\/span>\/\/     volume: 50,\n<\/span>\/\/     bass: 100\n<\/span>\/\/   }\n<\/span>\/\/ }<\/span><\/code><\/pre>\n
const defaultSettings =<\/span> {<\/span>\n  power:<\/span> true<\/span>,<\/span>\n  soundSettings:<\/span> {<\/span>\n    volume:<\/span> 50<\/span>,<\/span>\n    bass:<\/span> 20<\/span>\n  }<\/span>\n}<\/span>;<\/span>\n\n\/\/ Performing a deep freeze (after including deep-freeze in your code per instructions on npm)\n<\/span>deepFreeze(<\/span>defaultSettings)<\/span>;<\/span>\n\n\/\/ Attempting to change deep properties will fail silently\n<\/span>defaultSettings.<\/span>soundSettings.<\/span>bass =<\/span> 100<\/span>;<\/span>\n\n\/\/ soundSettings doesn't get mutated anymore\n<\/span>console.<\/span>log(<\/span>defaultSettings)<\/span>;<\/span>\n\/\/ {\n<\/span>\/\/   power: true,\n<\/span>\/\/   soundSettings: {\n<\/span>\/\/     volume: 50,\n<\/span>\/\/     bass: 20\n<\/span>\/\/   }\n<\/span>\/\/ }<\/span><\/code><\/pre>\n<\/div>\n
\n
Non confondete il riassegnamento con la mutazione<\/h2>\n
Quando riassegnate una variabile, cambiate quello a cui punta. Nell’esempio seguente, a<\/code> \u00e8 cambiato da 11<\/code> a 100<\/code>.<\/p>\n
let<\/span> a<\/span> =<\/span> 11<\/span>;<\/span>\na<\/span> =<\/span> 100<\/span>;<\/span><\/code><\/pre>\n
Quando mutate un oggetto, esso viene cambiato. Il riferimento all’oggetto rimane lo stesso.<\/p>\n
const egg =<\/span> {<\/span> name:<\/span> \"Humpty Dumpty\"<\/span> }<\/span>;<\/span>\negg.<\/span>isBroken =<\/span> false<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
\n
Conclusioni<\/h2>\n
La mutazione fa paura perch\u00e9 pu\u00f2 causare la rottura del vostro codice senza che lo sappiate. Anche se sospettate che la causa della rottura sia una mutazione, pu\u00f2 essere difficile per voi definire con precisione quale parte del codice ha creato la mutazione. Quindi, il modo migliore per impedire che il codice smetta di funzionare senza saperlo \u00e8 assicurarsi che gli oggetti non mutino fin dall’inizio.<\/p>\n
Per impedire che gli oggetti mutino, potete usare delle librerie quali ImmutableJS<\/a> e Mori.js<\/a>, o usare Object.assign<\/code> e Object.freeze<\/code>.<\/p>\n
Prendete nota che Object.assign<\/code> e Object.freeze<\/code> possono solo impedire che le propriet\u00e0 dirette mutino. Se dovete impedire che livelli multipli di oggetti mutino, avrete bisogno di librerie come assignment<\/a> e deep-freeze<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I cambiamenti inaspettati nel vostro codice JavaScript possono essere dei veri grattacapi. Pu\u00f2 essere ancora pi\u00f9 difficile prevenire questi cambiamenti involontari, quando si lavora con gli oggetti. Zell Liew ci mostra alcuni trucchi (e librerie) per prevenire questi cambiamenti non intenzionali e assicurare la stabilit\u00e0 quando si lavora con gli oggetti.<\/p>\n","protected":false},"author":818,"featured_media":7000845,"comment_status":"open","ping_status":"open","template":"","categories":[4,271,218],"tags":[],"coauthors":[529],"class_list":["post-841","article","type-article","status-publish","has-post-thumbnail","hentry","category-codice","category-javascript","category-numero-240-11-gennaio-2018"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000845"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=841"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Per impedire una mutazione profonda, potete usare una libreria chiamata deep-freeze<\/a>, che chiama ricorsivamente Object.freeze<\/code> su tutti gli oggetti.<\/p>\n
assignment \u00e8 solo una della molte librerie che vi aiutano a fare un deep merge. Anche altre librerie, incluse lodash.merge<\/a> e merge-options<\/a>, possono aiutarvi a farlo. Sentitevi liberi di scegliere una di queste librerie.<\/p>\n