La destructuration en JavaScript : extraire des valeurs d'un objet ou d'un tableau

Avant 2015, récupérer trois propriétés d'un objet demandait trois lignes qui répétaient toutes le nom de cet objet. La destructuration fait la même chose en une instruction, et on la croise aujourd'hui partout : composants React, imports, signatures de fonctions.

Ce n'est pas une capacité nouvelle du langage, seulement une écriture plus courte de quelque chose qui existait déjà.

Définition

La destructuration est une syntaxe qui extrait des valeurs d'un tableau ou des propriétés d'un objet pour les affecter directement à des variables, en une seule instruction.

Le principe tient en une phrase : on place à gauche du signe égal la forme de ce qu'on attend à droite. Des accolades pour un Object (objet), des crochets pour un Array (tableau).

const user = { name: "Ada", city: "Londres" };

// Version longue
const nom = user.name;
const ville = user.city;

// Version destructurée, strictement équivalente
const { name, city } = user;
console.log(nom === name, ville === city); // true true

// Sur un tableau, c'est la position qui décide
const [premier, second] = [10, 20];
console.log(premier + second); // 30

Sur un objet, ce sont les noms qui comptent et l'ordre n'a aucune importance. Sur un tableau c'est l'inverse : la position décide, et un élément dont on ne veut pas se saute en laissant une virgule vide.

Défaut, renommage et reste

Trois options se greffent sur la syntaxe de base, et ce sont celles qu'on croise le plus dans du vrai code.

• Valeur par défaut. const { role = "membre" } = user; donne une valeur de repli quand la propriété est absente. Attention : elle ne s'applique que si la valeur vaut undefined. Une propriété qui vaut null, 0 ou une chaîne vide garde sa valeur.
• Renommage. const { name: pseudo } = user; crée une variable pseudo. Utile quand le nom d'origine entre en conflit avec une variable existante.
• Le reste. Combinée à Rest (...), elle isole une propriété et regroupe les autres dans un nouvel objet.

Dans une signature de fonction

C'est l'usage le plus agréable à lire : la fonction annonce dès sa première ligne ce dont elle a besoin.

function carte({ titre, prix, devise = "EUR" }) {
  return titre + " : " + prix + " " + devise;
}

console.log(carte({ titre: "Formation", prix: 49 }));
// "Formation : 49 EUR"

L'appelant passe un objet, l'ordre des clés lui est indifférent, et ajouter un paramètre plus tard ne casse aucun appel existant. C'est pourquoi les bibliothèques modernes acceptent presque toujours un objet d'options.

Questions fréquentes

La variable est créée et vaut undefined, sans erreur. En revanche, destructurer une valeur qui vaut elle-même null ou undefined lève une erreur immédiate, parce que le langage ne peut pas y chercher de propriété. Un objet d'options se protège avec un objet vide par défaut.

Oui, en répétant la syntaxe : const { adresse: { ville } } = user; extrait ville directement. C'est pratique sur deux niveaux, illisible au-delà, et cela échoue si le niveau intermédiaire est absent. Dans ce cas, le Chaînage optionnel (?.) est plus sûr.

Les deux utilisent des accolades ou des crochets, mais ils travaillent dans des sens opposés. La destructuration sort des valeurs d'une structure, à gauche du signe égal. Le Spread (...) en injecte dans une nouvelle structure, à droite. On les croise ensemble dans les composants React. Notre formation React repose entièrement sur cette écriture, ce qui vaut la peine de la maîtriser avant de s'y lancer.