JavaScript Academy · Lezione

Evitare la mutazione

Lavori con copie invece di modificare i dati direttamente.

Evitare la mutazione è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Perché evitare le modifiche

Modificare dati condivisi causa bug difficili da tracciare: una modifica in un punto sorprende il codice in altri punti. Lo stile funzionale privilegia la creazione di nuovi valori rispetto alla modifica di quelli esistenti (immutabilità).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Usare lo spread per copiare gli array

L'operatore spread ... crea una copia superficiale di un array, consentendo di aggiungere elementi senza modificare l'origine.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Usare lo spread per copiare gli oggetti

Spread funziona anche con gli oggetti e produce un nuovo oggetto con le stesse proprietà, oltre a eventuali sovrascritture.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Metodi degli array che non modificano l'origine

Preferisca i metodi che restituiscono nuovi array: map, filter, concat e slice. Eviti quelli che modificano l'array, come push, splice e sort in place.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Aggiungere senza modificare

Invece di push, costruisca un nuovo array con lo spread o con concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Rimuovere senza modificare

Utilizzi filter per produrre un nuovo array senza un elemento, invece di splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Aggiornare un elemento senza modificare l'origine

Per modificare un elemento, applichi map all'array e restituisca un nuovo valore per l'elemento corrispondente.

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true

Superficiale e profondo

Lo spread copia un solo livello in profondità. Gli oggetti annidati rimangono riferimenti condivisi. Per aggiornare dati annidati senza modificarli, utilizzi lo spread a ogni livello che cambia.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Congelare per maggiore sicurezza

Object.freeze impedisce modifiche accidentali a un oggetto durante l'esecuzione, rendendo esplicita l'immutabilità (a un solo livello di profondità).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

Const non significa immutabilità

Un errore comune consiste nel confondere i due concetti: const impedisce solo di riassegnare la variabile, non di modificare il valore che contiene. È comunque possibile aggiungere elementi con push a un array dichiarato con const.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Riepilogo dei vantaggi

Gli aggiornamenti immutabili rendono semplice rilevare le modifiche (confrontando i riferimenti), consentono di annullare e ripristinare le operazioni, prevengono effetti a distanza difficili da prevedere e si combinano naturalmente con le funzioni pure.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Verifica rapida

Evitare le modifiche.

Riepilogo

L'immutabilità consiste nel creare nuovi valori invece di modificare quelli esistenti. Utilizzi lo spread per copiare array e oggetti, preferisca i metodi che non modificano l'origine (map, filter, concat) e usi lo spread a ogni livello per gli aggiornamenti dei dati annidati. Ricordi che const impedisce la riassegnazione, non la modifica; Object.freeze aggiunge una protezione durante l'esecuzione. Gli aggiornamenti immutabili semplificano il rilevamento delle modifiche e la scrittura di codice puro.

Domande Frequenti

La lezione «Evitare la mutazione» è gratuita?

Sì — il testo completo di «Evitare la mutazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Evitare la mutazione»?

Lavori con copie invece di modificare i dati direttamente. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Evitare la mutazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy