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

by Anastasia P.
Add as preferred source on Google
SHARE
Introduzione a ES6+ e alle novità di JavaScript: destrutturazione e spread/rest
© Guida-HTML5.it

Introduzione

Quando si parla di JavaScript ES6+, spesso si pensa subito a classi, moduli o async/await. Ma una delle novità più utili e pratiche introdotte con ES6 riguarda la gestione dei dati in modo più elegante: destrutturazione e operatori spread/rest.

Questi strumenti rendono il codice più leggibile, riducono il numero di righe e aiutano a lavorare meglio con oggetti e array, soprattutto nei progetti reali. Sono molto usati in frontend, backend con Node.js e in librerie moderne come React o Vue.

In questo tutorial vedremo un sotto-argomento molto utile e spesso sottovalutato: come usare destrutturazione, spread e rest per scrivere codice più pulito e mantenibile.

Codice completo

// Esempio pratico: gestione di un profilo utente e di una lista ordini

const utente = {
  nome: "Giulia",
  cognome: "Rossi",
  eta: 29,
  indirizzo: {
    citta: "Milano",
    cap: "20100"
  }
};

// 1) Destrutturazione di un oggetto
const { nome, eta } = utente;

console.log(nome); // "Giulia"
console.log(eta);  // 29

// 2) Destrutturazione con rinomina e valori di default
const { cognome: cognomeUtente, ruolo = "cliente" } = utente;

console.log(cognomeUtente); // "Rossi"
console.log(ruolo);         // "cliente"

// 3) Destrutturazione annidata
const { indirizzo: { citta } } = utente;

console.log(citta); // "Milano"

// 4) Spread operator su oggetti: clonare e aggiornare
const utenteAggiornato = {
  ...utente,
  eta: 30,
  email: "[email protected]"
};

console.log(utenteAggiornato);

// 5) Spread operator su array: unire liste
const ordiniRecenti = [101, 102, 103];
const nuoviOrdini = [104, 105];

const tuttiGliOrdini = [...ordiniRecenti, ...nuoviOrdini];

console.log(tuttiGliOrdini); // [101, 102, 103, 104, 105]

// 6) Rest parameter in una funzione
function calcolaTotale(...prezzi) {
  return prezzi.reduce((somma, prezzo) => somma + prezzo, 0);
}

console.log(calcolaTotale(10, 20, 30)); // 60

// 7) Destrutturazione nei parametri di una funzione
function mostraProfilo({ nome, cognome, eta }) {
  console.log(`Utente: ${nome} ${cognome}, ${eta} anni`);
}

mostraProfilo(utente);

// 8) Uso pratico: separare un elemento dal resto di un array
const [primoOrdine, ...altriOrdini] = tuttiGliOrdini;

console.log(primoOrdine);  // 101
console.log(altriOrdini);   // [102, 103, 104, 105]

Spiegazione

1. Destrutturazione degli oggetti

La destrutturazione permette di estrarre proprietà da un oggetto in modo diretto. Invece di scrivere:

const nome = utente.nome;
const eta = utente.eta;

possiamo usare una sintassi più compatta:

const { nome, eta } = utente;

Questo è molto utile quando un oggetto ha molte proprietà e vogliamo lavorare solo con quelle necessarie.

2. Rinomina e valori di default

Con la destrutturazione possiamo anche rinominare le variabili. Ad esempio, se una proprietà si chiama cognome ma vogliamo salvarla in una variabile chiamata cognomeUtente, possiamo farlo così:

const { cognome: cognomeUtente } = utente;

Inoltre, possiamo assegnare un valore di default se la proprietà non esiste:

const { ruolo = "cliente" } = utente;

Questo evita controlli aggiuntivi e rende il codice più robusto.

3. Destrutturazione annidata

Gli oggetti spesso contengono altri oggetti. In questi casi possiamo estrarre direttamente i dati interni:

const { indirizzo: { citta } } = utente;

È una soluzione elegante, ma va usata con attenzione: se la struttura non è garantita, si rischiano errori. In situazioni reali, è bene verificare che l’oggetto esista prima di destrutturarlo.

4. Spread operator

Lo spread operator usa la sintassi ... per “espandere” elementi di un array o proprietà di un oggetto.

Nel caso degli oggetti, è molto utile per creare una copia aggiornata senza modificare l’originale:

const utenteAggiornato = {
  ...utente,
  eta: 30
};

Questo approccio è fondamentale nello sviluppo moderno, soprattutto quando si lavora con dati immutabili.

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

const tuttiGliOrdini = [...ordiniRecenti, ...nuoviOrdini];

5. Rest parameter

Il rest parameter ha una sintassi simile allo spread, ma si usa in modo diverso. Serve a raccogliere più valori passati a una funzione in un unico array.

function calcolaTotale(...prezzi) {
  return prezzi.reduce((somma, prezzo) => somma + prezzo, 0);
}

Qui prezzi diventa un array contenente tutti gli argomenti passati alla funzione. È perfetto per funzioni che devono accettare un numero variabile di parametri.

6. Destrutturazione nei parametri di funzione

Un altro uso molto pratico è destrutturare direttamente i parametri di una funzione. In questo modo si evita di accedere continuamente alle proprietà dell’oggetto:

function mostraProfilo({ nome, cognome, eta }) {
  console.log(`Utente: ${nome} ${cognome}, ${eta} anni`);
}

Questa tecnica è molto comune quando si ricevono oggetti da API, componenti o funzioni di utilità.

Best practice

  • Usa la destrutturazione solo quando migliora la leggibilità: se l’oggetto è molto piccolo, una notazione diretta può essere ancora più chiara.
  • Proteggi la destrutturazione di dati non sicuri: se un oggetto può essere null o undefined, verifica prima la sua presenza.
  • Preferisci lo spread per creare nuove copie: evita di modificare direttamente oggetti o array originali, soprattutto in applicazioni complesse.
  • Usa il rest parameter per funzioni flessibili: è ideale quando non sai in anticipo quanti argomenti verranno passati.
  • Non abusare della destrutturazione annidata: se diventa troppo profonda, il codice può risultare difficile da leggere.
  • Combina spread e destrutturazione con attenzione: sono strumenti potenti, ma il codice deve restare chiaro anche per chi lo leggerà in futuro.

Riepilogo

La destrutturazione e gli operatori spread/rest sono tra le novità più pratiche introdotte con ES6 e oggi sono parte essenziale del JavaScript moderno.

Con questi strumenti puoi:

  • estrarre facilmente valori da oggetti e array;
  • rinominare variabili e assegnare valori di default;
  • clonare e aggiornare dati senza mutare gli originali;
  • unire array e oggetti in modo elegante;
  • scrivere funzioni più flessibili e compatte.

Se vuoi migliorare la qualità del tuo codice JavaScript, questo è uno degli argomenti da padroneggiare subito dopo le basi. È semplice da imparare, ma estremamente utile nei progetti reali.

Approfondisci con risorse ufficiali

  • MDN Web Docs - Destructuring assignment
  • MDN Web Docs - Spread syntax
  • MDN Web Docs - Rest parameters
  • ECMAScript Language Specification
  • JavaScript.info - Destructuring assignment

Studiare queste risorse ti aiuterà a consolidare i concetti e a usare ES6+ con maggiore sicurezza nei tuoi progetti quotidiani.

Add as preferred source on Google
SHARE