Destructuring et spread/rest

Extrayez proprement les données d'objets et de tableaux, puis copiez et fusionnez des structures avec l'opérateur spread.

8 min · 3 questions

Quand vous recevez des données d'une API, vous n'avez souvent besoin que de quelques propriétés. Le destructuring les extrait en une ligne, avec possibilité de renommer, de descendre dans les objets imbriqués et de prévoir une valeur par défaut si la propriété est absente.

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

Le destructuring fonctionne aussi sur les tableaux, par position cette fois. Son usage le plus professionnel reste les paramètres de fonction : au lieu de recevoir un objet opaque, la signature annonce exactement les propriétés attendues. Le code devient auto-documenté.

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

Le même opérateur ... a deux visages. En spread, il éclate un tableau ou un objet pour le copier ou le fusionner : très utilisé pour appliquer des réglages par défaut puis les surcharger. En rest, il regroupe « tout ce qui reste » dans un tableau, par exemple pour accepter un nombre variable d'arguments.

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

Exercice mental avant de passer au quiz : dans { ...baseConfig, ...overrides }, que se passe-t-il si les deux objets définissent lang ? C'est le dernier écrit qui gagne. Ce détail d'ordre est exactement ce qui permet le motif « valeurs par défaut puis surcharge ».

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que fait la ligne const { city } = user; ?
   • Elle crée une variable city contenant user.city
   • Elle renomme l'objet user en city
   • Elle crée un nouvel objet vide nommé city
2. Dans function log(...args), que vaut args à l'intérieur de la fonction ?
   • Un objet clé-valeur
   • Un vrai tableau contenant tous les arguments reçus
   • Une chaîne de caractères
   • Le premier argument uniquement
3. Après const copy = { ...original };, les objets imbriqués sont-ils dupliqués ?
   • Oui, la copie est totalement indépendante
   • Non, ils restent partagés : la copie est superficielle
   • Ils sont supprimés de la copie