Introduzione alle novità di JavaScript ES6+: destrutturazione e spread/rest

Introduzione

ES6, oggi spesso indicato come ES6+ o JavaScript moderno, ha cambiato in modo profondo il modo in cui scriviamo codice. Tra le novità più utili e pratiche ci sono destrutturazione, spread e rest: tre strumenti che rendono il codice più leggibile, più compatto e spesso anche più sicuro.

Queste feature sono molto usate in progetti reali, soprattutto quando si lavora con oggetti, array, parametri di funzione e dati provenienti da API. In questo tutorial vedremo un sotto-argomento pratico e fondamentale: come usare destrutturazione, spread e rest per gestire dati in modo elegante.

L’obiettivo non è solo imparare la sintassi, ma capire quando usarla e perché conviene. Se hai già familiarità con JavaScript classico, questo è uno dei passi più importanti per passare a uno stile di sviluppo moderno.

Codice completo

// Esempio completo: gestione di un profilo utente e dei suoi dati

const utente = {
  id: 42,
  nome: "Giulia",
  cognome: "Rossi",
  email: "[email protected]",
  ruolo: "editor",
  preferenze: {
    tema: "dark",
    notifiche: true
  }
};

// 1) Destrutturazione di oggetti
const { nome, cognome, ruolo } = utente;

console.log(`${nome} ${cognome} - ${ruolo}`);

// 2) Destrutturazione con rinomina e valori di default
const { email: contattoEmail, telefono = "Non disponibile" } = utente;

console.log(contattoEmail);
console.log(telefono);

// 3) Destrutturazione annidata
const {
  preferenze: {
    tema,
    notifiche
  }
} = utente;

console.log(tema, notifiche);

// 4) Spread: clonare e modificare oggetti
const utenteAggiornato = {
  ...utente,
  ruolo: "admin",
  ultimoAccesso: "2026-08-10"
};

console.log(utenteAggiornato);

// 5) Spread con array
const tagsBase = ["javascript", "es6"];
const tagsExtra = ["frontend", "best-practice"];

const tuttiITags = [...tagsBase, ...tagsExtra];

console.log(tuttiITags);

// 6) Rest parameters: raccogliere un numero variabile di argomenti
function creaMessaggio(titolo, ...contenuti) {
  return `${titolo}: ${contenuti.join(" | ")}`;
}

console.log(creaMessaggio("Aggiornamento", "ES6", "spread", "destrutturazione"));

// 7) Rest nella destrutturazione array
const numeri = [10, 20, 30, 40, 50];
const [primo, secondo, ...restanti] = numeri;

console.log(primo);
console.log(secondo);
console.log(restanti);

// 8) Funzione utile: separare campi pubblici e campi sensibili
function preparaProfiloPubblico({ email, preferenze, ...pubblico }) {
  return {
    ...pubblico,
    temaPreferito: preferenze.tema
  };
}

console.log(preparaProfiloPubblico(utente));

Spiegazione

Partiamo dalla destrutturazione. È una sintassi che permette di estrarre valori da oggetti o array in modo diretto, senza dover scrivere molti passaggi intermedi.

1. Destrutturazione di oggetti

Nel codice:

const { nome, cognome, ruolo } = utente;

stiamo dicendo a JavaScript: prendi le proprietà nome, cognome e ruolo dall’oggetto utente e assegnale a variabili con lo stesso nome.

Questo è molto più leggibile rispetto a scrivere:

const nome = utente.nome;
const cognome = utente.cognome;
const ruolo = utente.ruolo;

La destrutturazione è particolarmente utile quando ricevi oggetti da API, funzioni o configurazioni.

2. Rinomina e valori di default

La sintassi:

const { email: contattoEmail, telefono = "Non disponibile" } = utente;

mostra due casi importanti:

• Rinomina: email viene salvata nella variabile contattoEmail.
• Default: se telefono non esiste, viene usato il valore predefinito.

Questa tecnica è utile quando vuoi rendere il codice più robusto e prevenire errori dovuti a proprietà mancanti.

3. Destrutturazione annidata

Nel nostro oggetto utente c’è una proprietà preferenze che contiene a sua volta un oggetto. Con la destrutturazione annidata possiamo estrarre direttamente i dati interni:

const {
  preferenze: {
    tema,
    notifiche
  }
} = utente;

È una soluzione elegante, ma va usata con attenzione: se la struttura dei dati è instabile o può mancare, conviene aggiungere controlli più espliciti.

4. Spread per oggetti

L’operatore spread serve a “espandere” un array o un oggetto in un nuovo contesto.

Nel caso degli oggetti:

const utenteAggiornato = {
  ...utente,
  ruolo: "admin",
  ultimoAccesso: "2026-08-10"
};

Qui creiamo un nuovo oggetto copiando tutte le proprietà di utente, poi sovrascriviamo ruolo e aggiungiamo ultimoAccesso. Questo è molto utile in programmazione funzionale e nello sviluppo frontend, perché evita di modificare l’oggetto originale.

5. Spread per array

Con gli array, lo spread permette di unire liste in modo semplice:

const tuttiITags = [...tagsBase, ...tagsExtra];

Il risultato è un nuovo array contenente tutti gli elementi dei due array originali. È una tecnica comune per concatenare dati, creare liste aggiornate o preparare payload.

6. Rest parameters nelle funzioni

Il rest è simile allo spread nella sintassi, ma ha uno scopo diverso. Serve a raccogliere più valori in un unico array.

function creaMessaggio(titolo, ...contenuti) {
  return `${titolo}: ${contenuti.join(" | ")}`;
}

Qui titolo prende il primo argomento, mentre ...contenuti raccoglie tutti gli altri in un array. È molto utile quando una funzione deve accettare un numero variabile di argomenti.

7. Rest nella destrutturazione degli array

Nel caso:

const [primo, secondo, ...restanti] = numeri;

stiamo prendendo i primi due elementi dell’array e raccogliendo il resto in restanti. Questo approccio è comodo quando ti interessano solo alcuni valori iniziali e vuoi conservare gli altri.

8. Una funzione pratica per filtrare dati

La funzione preparaProfiloPubblico mostra un caso reale: prendere un oggetto utente e costruire una versione pubblica, escludendo dati sensibili.

function preparaProfiloPubblico({ email, preferenze, ...pubblico }) {
  return {
    ...pubblico,
    temaPreferito: preferenze.tema
  };
}

Qui usiamo la destrutturazione nei parametri della funzione per separare alcuni campi e raccogliere il resto con ...pubblico. Poi restituiamo un nuovo oggetto più adatto alla visualizzazione o all’esposizione in API.

Best practice

• Usa la destrutturazione quando migliora la leggibilità: se stai leggendo più volte le stesse proprietà, destrutturarle rende il codice più pulito.
• Non esagerare con la destrutturazione annidata: se la struttura è troppo profonda, il codice può diventare difficile da leggere e da mantenere.
• Preferisci spread per creare nuovi oggetti o array: evita di modificare direttamente i dati originali, soprattutto in contesti con stato condiviso.
• Usa rest parameters per funzioni flessibili: sono perfetti per utility, wrapper e funzioni che devono accettare input variabile.
• Attenzione ai valori mancanti: quando destrutturi oggetti provenienti da fonti esterne, usa valori di default o controlli preventivi.
• Ricorda la differenza tra spread e rest: la sintassi è simile (...), ma lo spread espande valori esistenti, mentre il rest li raccoglie.

Riepilogo

La destrutturazione, lo spread e il rest sono tra le novità più pratiche introdotte con ES6+. Ti aiutano a scrivere codice più moderno, compatto e leggibile.

• Destrutturazione: estrae valori da oggetti o array.
• Spread: copia o combina oggetti e array.
• Rest: raccoglie un numero variabile di valori in un array.

Questi strumenti sono ormai parte del quotidiano di chi sviluppa in JavaScript, specialmente in frontend, backend con Node.js e applicazioni basate su dati dinamici. Impararli bene significa scrivere codice più professionale e più facile da mantenere.

Approfondisci con risorse ufficiali

• MDN Web Docs - Destructuring assignment: documentazione completa e aggiornata sulla destrutturazione.
• MDN Web Docs - Spread syntax: guida ufficiale all’operatore spread.
• MDN Web Docs - Rest parameters: spiegazione dettagliata dei parametri rest nelle funzioni.
• ECMAScript Language Specification: la specifica ufficiale del linguaggio JavaScript.

Se vuoi fare un passo in più, prova a riscrivere vecchi script usando destrutturazione, spread e rest. È uno dei modi migliori per interiorizzare davvero le novità di ES6+.