Destructuring: array, oggetti, default, nested, rest

Prendere un array o un oggetto e «spacchettarlo» in singole variabili, senza scrivere array[0], array[1] o oggetto.proprietà a mano. Il destructuring è esattamente cio che ci serve: una sintassi che permette di estrarre valori da array, o proprietà da oggetti, in variabili distinte.

1. Destructuring di array: posizione, non nome

const colori = ["rosso", "verde", "blu"];

const [primo, secondo, terzo] = colori;

console.log(primo); // "rosso"

Scambiare due variabili senza una variabile temporanea: prima serviva sempre un contenitore d'appoggio.

let a = 1;
let b = 3;

[a, b] = [b, a];

console.log(a); // 3
console.log(b); // 1

Puoi anche ignorare i valori che non ti servono, lasciando lo spazio vuoto tra virgole:

const [primo, , terzo] = ["a", "b", "c"];

console.log(primo); // "a"
console.log(terzo); // "c"

Fonte: MDN Web Docs — «Destructuring assignment»: due valori possono essere scambiati in una sola espressione di destructuring, senza variabile temporanea; è possibile ignorare elementi lasciandoli vuoti tra le virgole.

2. Destructuring di oggetti: per nome, con valori di default

Con gli oggetti, il destructuring lavora per nome della proprietà, non per posizione. Puoi anche assegnare un valore di default da usare quando la proprietà risulta undefined.

const utente = {
    nome: "Ada",
    ruolo: "admin"
};

const { nome, ruolo } = utente;

console.log(nome); // "Ada"

const { nome, eta = 18 } = utente; // eta non esiste sull'oggetto

console.log(eta); // 18 -- il default e' usato solo se il valore e' undefined

3. Nested destructuring: dentro oggetti e array annidati

Il destructuring può scendere più livelli in profondità, rispecchiando la forma della struttura dati originale.

const risposta = {
    utente: {
        nome: "Ada",
        indirizzo: {
            citta: "Roma"
        }
    },
    ruoli: ["admin", "editor"]
};

const {
    utente: {
        nome,
        indirizzo: {
            citta
        }
    },
    ruoli: [primoRuolo]
} = risposta;

console.log(nome, citta, primoRuolo); // "Ada" "Roma" "admin"

Nota importante: nome e citta diventano variabili dirette, non esiste una variabile intermedia utente o indirizzo a meno di dichiararla esplicitamente.

4. Rest pattern: il resto in un colpo solo

Sia negli array sia negli oggetti, il pattern ...resto raccoglie tutto ciò che non è stato destrutturato esplicitamente, in un nuovo array o oggetto.

const [primo, ...altri] = [1, 2, 3, 4];

console.log(primo); // 1
console.log(altri); // [2, 3, 4]

const { id, ...restoOggetto } = {
    id: 1,
    nome: "Ada",
    ruolo: "admin"
};

console.log(restoOggetto); // { nome: "Ada", ruolo: "admin" }

Regola fissa dal manuale: il rest pattern deve essere l'ultimo elemento della lista, e non può avere una virgola finale dopo di sé, è un errore di sintassi.

5. Nei parametri di funzione e negli import

Il destructuring funziona anche direttamente nei parametri di una funzione; comodo quando una funzione riceve un oggetto di opzioni e ti servono solo alcune proprietà.

function creaBottone({ testo, colore = "blu" }) {
    return `<button style="color:${colore}">${testo}</button>`;
}

creaBottone({ testo: "Invia" }); // usa il colore di default

Lo stesso pattern è alla base della sintassi import { qualcosa } from "modulo": stai destrutturando le esportazioni nominate di un modulo, esattamente come faresti con le proprietà di un oggetto.

import { useState, useEffect } from "react";

// equivalente concettualmente a:
// const { useState, useEffect } = React;

In sintesi

Il destructuring non aggiunge una funzionalità nuova, tutto ciò che fa era già possibile prima, a mano. Aggiunge però chiarezza: il codice dichiara esplicitamente quali pezzi di una struttura ti interessano, invece di nasconderli dentro accessi ripetuti.