Destructuring in JavaScript: oggetti, array, default e rest

Il destructuring è pattern matching sulle forme

Il destructuring ti permette di scrivere un pattern che rispecchia la forma di un oggetto o di un array ed estrarre i valori per nome o per posizione in una sola riga. Invece di prendere il valore una proprietà alla volta, descrivi quello che vuoi e JavaScript te lo consegna.

Le due varianti:

const user = { name: "Ada", age: 36 };
const { name, age } = user;
console.log(name, age);

const scores = [90, 85, 72];
const [first, second, third] = scores;
console.log(first, second, third);

Le parentesi graffe corrispondono a un oggetto tramite i nomi delle proprietà. Le parentesi quadre corrispondono a un array tramite la posizione. In entrambi i casi, le variabili a sinistra sono nuove dichiarazioni: non stai accedendo al valore per indice, stai descrivendo un pattern che ne estrae i pezzi.

Prima che esistesse il destructuring, lo stesso codice era così:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

Non è la fine del mondo, ma diventa ripetitivo quando lo fai in ogni funzione.

Il destructuring degli oggetti usa i nomi delle proprietà

Per gli oggetti, i nomi dentro le graffe devono corrispondere ai nomi delle proprietà dell'oggetto di origine. L'ordine non conta: JavaScript le cerca per chiave.

const book = {
    title: "The Pragmatic Programmer",
    author: "Hunt & Thomas",
    year: 1999,
};

const { year, title } = book;
console.log(title, year);

Se una proprietà non esiste nell'oggetto, la variabile vale undefined, senza errori:

const book = { title: "Refactoring" };
const { title, author } = book;
console.log(title);
console.log(author);

È importante ricordare questo comportamento silenzioso con undefined quando un errore di battitura nel nome di una proprietà ti fa grattare la testa alle due di notte.

Rinominare le variabili

A volte il nome della proprietà dell'oggetto non è quello che vuoi dare alla variabile: magari va in conflitto con qualcos'altro nello scope, o l'API usa una convenzione di nomi che non ti piace. Usa original: newName per assegnare un altro nome:

const response = { id: 42, msg: "ok" };
const { id: userId, msg: message } = response;

console.log(userId, message);

Leggilo come "prendi la proprietà id e chiamala userId". Prima viene il nome della proprietà, dopo i due punti il nome della nuova variabile. Sembra un'annotazione di tipo di altri linguaggi, ma non lo è.

Valori predefiniti

Se una proprietà potrebbe mancare, assegnale un valore predefinito direttamente nel pattern:

function connect(options) {
    const { host = "localhost", port = 5432, timeout = 5000 } = options;
    console.log(`connecting to ${host}:${port} (timeout ${timeout}ms)`);
}

connect({ host: "db.example.com" });
connect({});

I valori predefiniti entrano in gioco solo quando il valore è undefined. null, 0 e "" passano tutti senza modifiche:

const { retries = 3 } = { retries: null };
console.log(retries);

Questo sorprende molti. Se vuoi che anche null attivi il valore predefinito, ti serve un controllo esplicito, oppure puoi usare l'operatore di nullish coalescing ?? dopo il destructuring.

Puoi combinare valori predefiniti e rinomina:

const { host: hostname = "localhost" } = {};
console.log(hostname);

Il destructuring degli array usa la posizione

Gli array non hanno nomi, solo indici, quindi il pattern corrisponde per posizione. Usa le virgole per saltare gli elementi che non ti interessano:

const coords = [40.7, -74.0, 10];
const [lat, lon] = coords;
console.log(lat, lon);

const [, , altitude] = coords;
console.log(altitude);

Le due virgole iniziali dicono "salta gli indici 0 e 1". Visivamente è un po' denso, ma è comodo quando vuoi un solo valore dal mezzo.

Il destructuring degli array dà il meglio con le funzioni che restituiscono tuple:

function minMax(nums) {
    return [Math.min(...nums), Math.max(...nums)];
}

const [low, high] = minMax([5, 2, 9, 1, 7]);
console.log(low, high);

Lo stesso pattern compare ovunque negli hook di React: const [count, setCount] = useState(0).

Pattern rest: raccogliere gli avanzi

Dentro un pattern di destructuring, ...name raccoglie in una nuova variabile tutto ciò che non è stato preso per nome o per posizione.

Negli array, il rest prende la coda:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);
console.log(tail);

Negli oggetti, il rest prende tutte le proprietà che non sono state nominate esplicitamente:

const user = { id: 1, name: "Ada", email: "ada@example.com", role: "admin" };
const { id, ...rest } = user;

console.log(id);
console.log(rest);

È il modo idiomatico per togliere un campo da un oggetto senza modificarlo: rest è un nuovo oggetto che contiene tutto tranne id.

Il rest deve essere l'ultimo elemento del pattern. const [...init, last] è un errore di sintassi.

Destructuring annidato

I pattern si possono annidare. Se una proprietà è a sua volta un oggetto o un array, puoi destrutturarla nella stessa espressione:

const response = {
    status: 200,
    data: {
        user: { name: "Ada", age: 36 },
        tags: ["admin", "beta"],
    },
};

const {
    status,
    data: {
        user: { name },
        tags: [primaryTag],
    },
} = response;

console.log(status, name, primaryTag);

È potente, ma usalo con giudizio. Tre livelli di graffe annidate cominciano a sembrare un rompicapo. Quando succede, estrai i valori intermedi in variabili a sé: la leggibilità batte l'astuzia.

Un tranello: data: { user } nel pattern non crea una variabile chiamata data. È un'indicazione che dice "scendi dentro data e continua a destrutturare". Se ti serve anche data, aggiungila a parte:

const response = { data: { user: { name: "Ada" } } };
const { data, data: { user } } = response;
console.log(data);
console.log(user);

Destructuring dei parametri di funzione

Il posto in cui userai più spesso il destructuring è l'elenco dei parametri di una funzione. Trasforma il "passa un oggetto di opzioni" in una firma che si documenta da sola:

function createUser({ name, email, role = "member", active = true }) {
    console.log({ name, email, role, active });
}

createUser({ name: "Ada", email: "ada@example.com" });
createUser({ name: "Boris", email: "b@example.com", role: "admin" });

Dal lato della chiamata sembra una normale chiamata con un oggetto di opzioni. Dentro la funzione ottieni variabili con nome e valori predefiniti, senza più codice ripetitivo come options.name || "default".

Un punto delicato: chiamare questa funzione senza argomenti la fa andare in crash, perché non puoi destrutturare undefined. Dai un valore predefinito all'intero parametro:

function createUser({ name = "anon", role = "member" } = {}) {
    console.log(name, role);
}

createUser();

Il = {} dopo il pattern dice "se non arriva nessun argomento, fai finta che sia un oggetto vuoto". Poi entrano in gioco i valori predefiniti interni.

Scambiare e riassegnare

Il destructuring funziona anche con variabili già dichiarate, ma serve racchiudere tra parentesi il pattern dell'oggetto (altrimenti JavaScript legge la { come l'inizio di un blocco):

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

let user = { name: "Ada" };
({ name: user.name } = { name: "Boris" });
console.log(user);

Lo scambio con gli array è pulito. La riassegnazione con gli oggetti è più rara, ma vale la pena ricordarsi il trucco delle parentesi per quando ti servirà.

Un esempio realistico

Mettiamo insieme quasi tutto quello che abbiamo visto: una funzione che elabora la risposta di un'API:

function summarise({
    status,
    data: { items = [] } = {},
    meta: { total = 0 } = {},
} = {}) {
    const [firstItem, ...rest] = items;
    return {
        ok: status === 200,
        first: firstItem?.name ?? "none",
        remaining: rest.length,
        total,
    };
}

console.log(summarise({
    status: 200,
    data: { items: [{ name: "alpha" }, { name: "beta" }, { name: "gamma" }] },
    meta: { total: 3 },
}));

console.log(summarise());

Ogni livello destrutturato ha un valore predefinito, quindi la funzione sopravvive a dati parziali senza una pila di controlli if. È questo il vero vantaggio: firme precise e tolleranti allo stesso tempo.

Prossimo passo: lo spread sugli oggetti

Il destructuring tira fuori i valori dagli oggetti. Lo spread li mette dentro: copiare, unire e sovrascrivere. I due vanno sempre a braccetto nel JavaScript moderno, e lo spread è il prossimo argomento.