Spread e Rest operator

Gli Spread (...) e Rest (...) operator sono una delle funzionalità più utili introdotte con ES6. Usano la stessa sintassi, ma hanno scopi opposti:

• Spread → “espande” un array o un oggetto.
• Rest → “raccoglie” più valori in un unico array o oggetto.

Sono fondamentali in React per lavorare con props, state, immutabilità e funzioni flessibili.

Spread Operator

Lo Spread operator “spacchetta” gli elementi di un array o le proprietà di un oggetto.

Con gli array

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

Qui ...numeri copia ogni elemento dentro il nuovo array.

Copia di array (immutabilità)

const originale = [10, 20, 30];
const copia = [...originale];

In React è essenziale non modificare direttamente array o oggetti.

Unione di array

const a = [1, 2];
const b = [3, 4];
 
const unione = [...a, ...b];
// [1, 2, 3, 4]

Con gli oggetti

const utente = { nome: "Mario", eta: 30 };
 
const utenteAggiornato = {
  ...utente,
  eta: 31,
};

Le proprietà successive sovrascrivono quelle precedenti.

Copia e modifica di oggetti (React state)

setUser((prev) => ({
  ...prev,
  nome: "Luca",
}));

Questo evita mutazioni dirette dello state.

Rest Operator

Il Rest operator raccoglie più valori in un’unica variabile.

Con le funzioni

function somma(...numeri) {
  return numeri.reduce((acc, n) => acc + n, 0);
}
 
somma(1, 2, 3, 4);
// 10

Qui ...numeri crea un array con tutti gli argomenti.

Con destructuring di array

const numeri = [10, 20, 30, 40];
 
const [primo, ...altri] = numeri;
 
console.log(primo); // 10
console.log(altri); // [20, 30, 40]

Con destructuring di oggetti

const utente = {
  nome: "Anna",
  eta: 25,
  città: "Roma",
};
 
const { nome, ...resto } = utente;
 
console.log(nome); // "Anna"
console.log(resto); // { eta: 25, città: "Roma" }

Differenza chiave

Uso tipico in React

Aggiornare uno stato senza mutarlo

const [items, setItems] = useState([1, 2, 3]);
 
setItems((prev) => [...prev, 4]);

Passare props

const props = { nome: "Marco", eta: 28 };
 
<Utente {...props} />;

Gestire parametri dinamici

function Button({ type, ...props }) {
  return <button type={type} {...props} />;
}

Conclusione

Lo Spread e il Rest operator sono strumenti essenziali per:

• Gestire l’immutabilità
• Lavorare con array e oggetti
• Scrivere funzioni flessibili
• Passare e copiare dati in React

Saperli usare correttamente è una competenza fondamentale per ogni sviluppatore moderno.