JavaScript Academy · Lezione

Pattern di aggiornamento immutabile

Aggiorni i dati creando nuove copie.

Pattern di aggiornamento immutabile è 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.

Aggiornare senza modificare

Gli aggiornamenti immutabili creano una nuova copia a cui viene applicata la modifica, lasciando intatto l'originale. Questo è il fondamento della gestione prevedibile dello stato nel JavaScript moderno.

L'operatore spread ... è lo strumento principale.

Copiare un oggetto con spread

Espanda un oggetto in uno nuovo, quindi sovrascriva una proprietà. L'originale conserva il valore precedente.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Sono oggetti diversi

La copia è un oggetto completamente nuovo, non lo stesso riferimento. Il confronto dell'identità lo conferma.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Aggiungere una proprietà in modo immutabile

Per aggiungere un campo, espanda il vecchio oggetto e includa la nuova chiave. L'originale non cambia.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Rimuovere una proprietà in modo immutabile

Usi il destructuring per estrarre la chiave indesiderata e raccogliere il resto. L'oggetto contenente il resto la esclude.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Copiare gli array con spread

Espanda un array per copiarlo. Anche metodi come map e filter restituiscono nuovi array senza mai modificare quello di origine.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Aggiungere elementi a un array in modo immutabile

Anziché usare push, che modifica l'array, ne costruisca uno nuovo con spread. La lunghezza dell'originale rimane invariata.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Rimuovere elementi da un array in modo immutabile

Usi filter per produrre un nuovo array senza l'elemento indesiderato, lasciando intatto l'originale.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Aggiornare oggetti annidati

Gli aggiornamenti annidati richiedono l'uso di spread a ogni livello modificato. Viene ricreata solo la diramazione interessata; il resto viene condiviso tramite riferimento.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Aggiornare un elemento in un array

Usi map per restituire una copia modificata dell'elemento corrispondente e l'originale per tutti gli altri. Nessun elemento viene modificato.

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

console.log(todos[1].done);
console.log(updated[1].done);

Perché gli aggiornamenti immutabili sono importanti

Non modificare mai lo stato condiviso rende economico il rilevamento dei cambiamenti, perché è sufficiente confrontare i riferimenti, abilita annulla/ripristina e previene i bug dovuti a effetti a distanza. Lo schema è: copiare, poi modificare la copia. Per le copie profonde, la prossima lezione illustra structuredClone.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Verifica rapida

Che cosa produce { ...user, age: 37 } quando user contiene già una proprietà age?

Riepilogo: schemi di aggiornamento immutabili

Ha imparato ad aggiornare senza modificare:

Usi spread { ...obj, key: value } per copiare e sovrascrivere.
Usi il rest del destructuring per rimuovere una proprietà in modo immutabile.
Usi map, filter e spread sugli array al posto di push/splice.
Usi spread a ogni livello per gli aggiornamenti annidati e condivida il resto tramite riferimento.

Domande Frequenti

La lezione «Pattern di aggiornamento immutabile» è gratuita?

Sì — il testo completo di «Pattern di aggiornamento immutabile» è 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 «Pattern di aggiornamento immutabile»?

Aggiorni i dati creando nuove copie. 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 «Pattern di aggiornamento immutabile»?

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