Operatori di spread e rest

In JavaScript gli operatori spread (...) e rest (...) condividono la stessa sintassi ma hanno significati opposti, a seconda del contesto in cui vengono usati.

• Spread → espande un valore iterabile o un oggetto.
• Rest → raccoglie più valori in una singola variabile.

Sono strumenti fondamentali per scrivere codice moderno, pulito e immutabile.

Operatore Spread (...)

Lo spread operator “spalma” il contenuto di un array, un oggetto o una stringa.

Spread con array

const numeri = [1, 2, 3];
const copia = [...numeri];
 
console.log(copia); // [1, 2, 3]

Unisce più array:

const a = [1, 2];
const b = [3, 4];
 
const unione = [...a, ...b];
console.log(unione); // [1, 2, 3, 4]

Inserisce valori in mezzo:

const base = [1, 4];
const risultato = [1, 2, 3, ...base];

Spread con oggetti

const utente = { nome: "Luca", eta: 30 };
const copia = { ...utente };

Unisce oggetti:

const a = { nome: "Luca" };
const b = { eta: 30 };
 
const unione = { ...a, ...b };

Sovrascrittura:

const utente = { nome: "Luca", eta: 30 };
const aggiornato = { ...utente, eta: 31 };

Spread con stringhe

const testo = "ciao";
const lettere = [...testo];
 
console.log(lettere); // ["c", "i", "a", "o"]

Spread nelle chiamate di funzione

const numeri = [2, 5, 8];
Math.max(...numeri); // 8

Operatore Rest (...)

Il rest operator raccoglie più valori in un unico array o oggetto.

Rest nei parametri di funzione

function somma(...numeri) {
  return numeri.reduce((a, b) => a + b, 0);
}
 
somma(1, 2, 3); // 6

Rest con destrutturazione array

const [a, b, ...resto] = [1, 2, 3, 4, 5];
 
console.log(resto); // [3, 4, 5]

Rest con destrutturazione oggetti

const utente = { nome: "Luca", eta: 30, città: "Roma" };
const { nome, ...altro } = utente;
 
console.log(altro); // { eta: 30, città: "Roma" }

Spread vs Rest

Uso tipico nello sviluppo moderno

• Copiare array e oggetti senza mutare gli originali
• Unire strutture dati
• Gestire parametri dinamici
• Lavorare con destrutturazione
• Scrivere codice più leggibile e funzionale

Errori comuni

const obj = { a: 1 };
const errato = [...obj]; // ❌ TypeError

Lo spread sugli oggetti funziona solo dentro oggetti:

const corretto = { ...obj };

Compatibilità

Supportato da tutti i browser moderni (ES6+). Per ambienti legacy è necessario un transpiler come Babel.

Gli operatori spread e rest sono essenziali per scrivere codice JavaScript moderno, modulare e privo di effetti collaterali. Usarli correttamente significa adottare uno stile più chiaro, flessibile e professionale.