JavaScript: Destructuring e spread/rest per gestire dati di routing e query string in modo pulito

Introduzione

Quando si lavora con applicazioni web, uno dei punti più frequenti è la gestione dei dati provenienti dall’URL: parametri di routing, query string, filtri, ordinamenti, paginazione e valori opzionali. In questi casi, destructuring assignment e spread/rest operator sono strumenti molto utili per scrivere codice più leggibile, più sicuro e più facile da mantenere.

Questo tutorial si concentra proprio su un caso pratico: estrarre e ricostruire dati di routing e query string in JavaScript. È un argomento molto comune in applicazioni SPA, dashboard, pagine di ricerca e componenti che devono sincronizzarsi con l’URL.

Vedremo come:

estrarre parametri da oggetti che rappresentano la route;
separare i valori utili dai parametri extra con il rest operator;
creare nuovi oggetti di query string senza mutare quelli originali;
impostare valori di default in modo pulito;
gestire casi reali con codice semplice e riutilizzabile.

Codice completo

// Simuliamo un oggetto che rappresenta una route e i suoi parametri
const routeInfo = {
  path: "/products",
  params: {
    category: "books",
    slug: "javascript-moderno"
  },
  query: {
    page: "2",
    sort: "price",
    order: "asc",
    debug: "true"
  }
};

// 1) Destructuring dell´oggetto principale
const {
  path,
  params: { category, slug },
  query: rawQuery
} = routeInfo;

// 2) Destructuring della query con valori di default e rest
const {
  page = "1",
  sort = "relevance",
  order = "desc",
  ...extraQuery
} = rawQuery;

// 3) Conversione di alcuni valori
const currentPage = Number(page);
const isDebugMode = extraQuery.debug === "true";

// 4) Creiamo una nuova query pulita per costruire un link
const baseQuery = {
  page: currentPage,
  sort,
  order
};

// 5) Spread per unire oggetti senza modificare gli originali
const nextPageQuery = {
  ...baseQuery,
  page: currentPage + 1
};

// 6) Funzione che costruisce una query string a partire da un oggetto
function toQueryString(queryObject) {
  const entries = Object.entries(queryObject)
    .filter(([, value]) => value !== undefined && value !== null && value !== "");

  return entries
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
    .join("&");
}

// 7) Creiamo un URL finale
const nextPageUrl = `${path}/${category}/${slug}?${toQueryString(nextPageQuery)}`;

// 8) Esempio di estrazione di un elenco di filtri dinamici
const filters = {
  category,
  slug,
  ...extraQuery
};

// 9) Rest operator su array: separiamo il primo filtro dagli altri
const [firstFilter, ...otherFilters] = Object.keys(filters);

console.log("Path:", path);
console.log("Categoria:", category);
console.log("Slug:", slug);
console.log("Pagina corrente:", currentPage);
console.log("Debug attivo:", isDebugMode);
console.log("Query pulita:", baseQuery);
console.log("Query pagina successiva:", nextPageQuery);
console.log("URL pagina successiva:", nextPageUrl);
console.log("Filtri completi:", filters);
console.log("Primo filtro:", firstFilter);
console.log("Altri filtri:", otherFilters);

Spiegazione

Il punto di forza del destructuring è che ci permette di estrarre solo i dati che ci servono da un oggetto o da un array, senza dover scrivere accessi ripetitivi come routeInfo.query.page o routeInfo.params.category.

1) Destructuring di oggetti annidati

Nel codice iniziale abbiamo:

const {
  path,
  params: { category, slug },
  query: rawQuery
} = routeInfo;

Qui stiamo prendendo:

path direttamente dall’oggetto principale;
category e slug dall’oggetto annidato params;
query rinominandolo in rawQuery.

Questo è utile quando vuoi dare un nome più chiaro a una variabile o evitare conflitti con altri identificatori nel file.

2) Valori di default nel destructuring

La query string spesso contiene parametri opzionali. Per esempio, se page non c’è, vogliamo usare "1" come default:

const {
  page = "1",
  sort = "relevance",
  order = "desc",
  ...extraQuery
} = rawQuery;

Qui succedono due cose importanti:

page, sort e order ricevono valori di default se mancano;
extraQuery raccoglie tutti i parametri rimanenti non esplicitamente estratti.

Questo approccio è molto comodo quando vuoi trattare alcuni campi come “ufficiali” e lasciare gli altri come metadati o filtri aggiuntivi.

3) Rest operator per raccogliere il resto

Il rest operator in oggetti funziona così:

const { a, b, ...resto } = oggetto;

Nel nostro esempio, extraQuery contiene tutto ciò che non è page, sort o order. Se nella query arriva debug=true, questo valore finisce in extraQuery.

È un pattern utile per:

separare i parametri principali da quelli opzionali;
pulire un oggetto prima di inviarlo a una funzione;
evitare di perdere dati non previsti.

4) Spread operator per creare nuovi oggetti

Lo spread operator copia le proprietà di un oggetto in un altro oggetto:

const nextPageQuery = {
  ...baseQuery,
  page: currentPage + 1
};

Qui stiamo creando una nuova query per la pagina successiva. È importante notare che non stiamo modificando baseQuery: stiamo costruendo un nuovo oggetto. Questo è fondamentale in JavaScript moderno, soprattutto quando lavori con stato, funzioni pure e componenti UI.

5) Creare query string da un oggetto

La funzione toQueryString trasforma un oggetto in una stringa URL-safe. Usiamo:

Object.entries() per ottenere coppie chiave/valore;
filter() per scartare valori vuoti;
map() per costruire i segmenti chiave=valore;
join("&") per unirli in una query string.

Il risultato è più robusto rispetto alla concatenazione manuale, e riduce il rischio di errori di encoding.

6) Rest operator sugli array

Nell’ultima parte usiamo il rest operator con un array:

const [firstFilter, ...otherFilters] = Object.keys(filters);

Qui estraiamo il primo elemento e raccogliamo tutti gli altri in un nuovo array. È utile quando vuoi trattare il primo elemento in modo speciale, ad esempio per mostrare un filtro principale e poi gli opzionali.

Best practice

Usa destructuring quando migliora la leggibilità: se devi accedere a proprietà annidate più volte, destruttura subito i dati.
Rinomina le variabili quando serve: ad esempio query: rawQuery chiarisce che il dato è ancora grezzo e deve essere normalizzato.
Imposta valori di default per i parametri opzionali: evita controlli ripetuti con if e rende il codice più lineare.
Non mutare gli oggetti originali: usa lo spread per creare nuove versioni di query, filtri o configurazioni.
Separa i dati noti da quelli extra: il rest operator è perfetto per raccogliere parametri dinamici senza perderli.
Valida e normalizza i valori: i parametri URL sono quasi sempre stringhe, quindi spesso devi convertirli con Number(), confrontarli o pulirli.
Attenzione agli oggetti annidati: se una proprietà può mancare, valuta un fallback sicuro per evitare errori in fase di destructuring.

Riepilogo

Destructuring assignment e spread/rest operator sono strumenti fondamentali per lavorare bene con dati di routing e query string in JavaScript. Ti permettono di:

estrarre solo i valori utili da oggetti complessi;
gestire parametri opzionali con default chiari;
separare dati principali e dati extra in modo elegante;
creare nuovi oggetti senza mutare quelli originali;
costruire query string in modo ordinato e riutilizzabile.

In un’app reale, questi pattern migliorano molto la qualità del codice, soprattutto quando l’URL diventa una fonte importante di stato applicativo. Più il progetto cresce, più queste tecniche aiutano a mantenere il codice leggibile e prevedibile.

Approfondisci con risorse ufficiali

MDN - Destructuring assignment: documentazione completa su array e object destructuring.
MDN - Spread syntax: spiegazione dettagliata dello spread operator in array e oggetti.
MDN - Rest parameters: guida all’uso del rest con funzioni e pattern di raccolta dati.
MDN - URLSearchParams: utile per lavorare con query string in modo ancora più robusto.
Documentazione del framework che usi: se lavori con React, Vue, Next.js o Express, controlla come gestiscono route e query params.

Add as preferred source on Google