JavaScript: Destructuring e spread/rest per lavorare con oggetti di risposta API

by Anastasia P.
Add as preferred source on Google
SHARE
JavaScript: Destructuring e spread/rest per lavorare con oggetti di risposta API
© Guida-HTML5.it

Introduzione

Quando lavoriamo con API, quasi mai riceviamo dati “perfetti” e già pronti all’uso. Spesso le risposte contengono molte proprietà, campi opzionali, metadati e strutture annidate. In questi casi, destructuring assignment e spread/rest operator diventano strumenti molto utili per rendere il codice più leggibile, più sicuro e più facile da mantenere.

In questo tutorial vediamo un sotto-argomento pratico e molto comune: come estrarre, rinominare, filtrare e ricostruire oggetti provenienti da una risposta API. È un caso reale che capita spesso in frontend, backend e integrazioni tra servizi.

L’obiettivo non è solo “scrivere meno codice”, ma soprattutto scrivere codice più chiaro. Con il destructuring possiamo prendere solo i campi che ci servono. Con lo spread possiamo creare nuove copie degli oggetti senza modificare gli originali. Con il rest possiamo raccogliere proprietà residue o argomenti aggiuntivi.

Codice completo

// Simuliamo una risposta API tipica
const apiResponse = {
  id: 42,
  first_name: "Luca",
  last_name: "Rossi",
  email: "[email protected]",
  role: "admin",
  active: true,
  created_at: "2025-01-10T09:30:00Z",
  profile: {
    city: "Milano",
    country: "Italia",
    preferences: {
      theme: "dark",
      language: "it"
    }
  },
  permissions: ["read", "write", "delete"]
};

// 1) Estrarre solo i campi utili e rinominarli
const {
  id,
  first_name: firstName,
  last_name: lastName,
  email,
  profile: {
    city,
    preferences: {
      theme
    }
  }
} = apiResponse;

// 2) Raccogliere il resto delle proprietà in un oggetto separato
const {
  permissions,
  ...userWithoutPermissions
} = apiResponse;

// 3) Creare una versione normalizzata per l´applicazione
const normalizedUser = {
  userId: id,
  fullName: `${firstName} ${lastName}`,
  email,
  location: city,
  theme,
  permissions,
  ...userWithoutPermissions
};

// 4) Aggiornare in modo immutabile un oggetto
const updatedUser = {
  ...normalizedUser,
  active: false,
  role: "editor"
};

// 5) Funzione che separa i campi principali dal resto
function summarizeUser({
  id,
  first_name: firstName,
  last_name: lastName,
  email,
  ...extra
}) {
  return {
    id,
    fullName: `${firstName} ${lastName}`,
    email,
    extraFields: extra
  };
}

console.log("Estratti:", { id, firstName, lastName, email, city, theme });
console.log("Senza permissions:", userWithoutPermissions);
console.log("Normalizzato:", normalizedUser);
console.log("Aggiornato:", updatedUser);
console.log("Riassunto:", summarizeUser(apiResponse));

Spiegazione

1) Destructuring: estrarre solo ciò che serve

Il destructuring consente di “smontare” un oggetto in variabili. Nell’esempio: 

const { id, email } = apiResponse;

stiamo dicendo a JavaScript: prendi le proprietà id ed email e salvale in variabili con lo stesso nome. Questo è utile perché evita accessi ripetuti come apiResponse.id e rende il codice più leggibile.

In più, possiamo anche rinominare le proprietà. Nel caso di first_name e last_name, i nomi arrivano spesso da API in formato snake_case, mentre nel codice frontend preferiamo camelCase: 

const { first_name: firstName, last_name: lastName } = apiResponse;

Qui non stiamo cambiando il dato, ma solo il nome della variabile locale.

2) Destructuring annidato: leggere dati profondi

Molte risposte API contengono oggetti annidati. Possiamo estrarre direttamente un valore profondo senza passaggi intermedi: 

const {
  profile: {
    city,
    preferences: { theme }
  }
} = apiResponse;

Questo è molto comodo, ma va usato con attenzione: se una proprietà intermedia non esiste, il destructuring può generare un errore. Più avanti vedremo come gestire meglio i casi incerti.

3) Rest operator: raccogliere il resto delle proprietà

Il rest operator dentro il destructuring permette di prendere tutte le proprietà non ancora estratte e metterle in un nuovo oggetto: 

const { permissions, ...userWithoutPermissions } = apiResponse;

In questo caso permissions viene estratto a parte, mentre tutto il resto finisce in userWithoutPermissions. Questo è utile quando vogliamo:

  • separare i dati principali dai metadati;
  • rimuovere campi sensibili prima di passare l’oggetto altrove;
  • costruire payload più piccoli e puliti.

4) Spread operator: creare nuove versioni di un oggetto

Lo spread operator serve a copiare le proprietà di un oggetto dentro un altro. Nell’esempio: 

const updatedUser = {
  ...normalizedUser,
  active: false,
  role: "editor"
};

stiamo creando un nuovo oggetto partendo da normalizedUser, ma sovrascrivendo active e role. Questo approccio è fondamentale nello sviluppo moderno perché evita mutazioni dirette e rende il flusso dei dati più prevedibile.

5) Funzioni con destructuring nei parametri

Una funzione può destrutturare direttamente il suo argomento. Questo è molto utile quando riceve un oggetto complesso: 

function summarizeUser({
  id,
  first_name: firstName,
  last_name: lastName,
  email,
  ...extra
}) {
  return {
    id,
    fullName: `${firstName} ${lastName}`,
    email,
    extraFields: extra
  };
}

In questo modo la funzione dichiara esplicitamente quali campi usa davvero. Tutto il resto finisce in extra, che può essere conservato, loggato o ignorato.

Best practice

  • Usa destructuring quando leggi dati ben definiti: è perfetto per oggetti con struttura nota, come risposte API documentate.
  • Rinomina i campi API in camelCase: migliora la coerenza del codice, soprattutto se la risposta usa snake_case.
  • Evita destrutturazioni troppo profonde se la struttura non è garantita: se i dati possono mancare, valuta controlli preliminari o valori di default.
  • Preferisci spread per creare nuove copie: non modificare direttamente gli oggetti ricevuti, specialmente se provengono da stato applicativo, cache o librerie esterne.
  • Usa il rest per filtrare o isolare campi: è utile per separare dati pubblici e privati, oppure per rimuovere proprietà non necessarie.
  • Non abusare del destructuring: se il codice diventa troppo denso o difficile da leggere, meglio spezzarlo in passaggi più chiari.

Riepilogo

Destructuring, spread e rest sono tre strumenti complementari che semplificano il lavoro con oggetti complessi, soprattutto quando arrivano da API. Il destructuring aiuta a estrarre e rinominare i campi. Il rest permette di raccogliere ciò che resta. Lo spread consente di costruire nuovi oggetti senza mutare gli originali.

Nel caso delle risposte API, questi operatori sono particolarmente utili per:

  • normalizzare dati con nomi diversi;
  • estrarre solo i campi necessari;
  • separare dati principali e accessori;
  • creare versioni aggiornate in modo immutabile.

Se usati bene, migliorano sia la leggibilità sia la manutenzione del codice. Il segreto è usarli con equilibrio: pochi passaggi chiari valgono più di una destrutturazione eccessivamente complessa.

Approfondisci con risorse ufficiali

  • MDN - Destructuring assignment
    La guida ufficiale più completa per capire sintassi, casi d’uso e limiti.
  • MDN - Spread syntax
    Spiegazione dettagliata di spread e rest in array, oggetti e funzioni.
  • ECMAScript Language Specification
    La specifica ufficiale del linguaggio JavaScript per chi vuole approfondire il comportamento formale.
  • MDN - Working with objects
    Utile per consolidare concetti come copie superficiali, proprietà e gestione degli oggetti.

Add as preferred source on Google
SHARE