La déstructuration en JavaScript : du pattern matching sur les formes
La déstructuration JavaScript permet d'écrire un motif qui épouse la forme d'un objet ou d'un tableau, et d'en extraire les valeurs par nom ou par position en une seule ligne. Plutôt que d'aller chercher propriété après propriété, tu décris ce que tu veux et JavaScript te le sert sur un plateau.
Les deux variantes :
Les accolades correspondent à un objet par nom de propriété. Les crochets, eux, correspondent à un tableau par position. Dans les deux cas, les variables avant le = sont de nouvelles déclarations — on n'accède pas par index à la valeur, on décrit un motif qui vient en extraire les morceaux.
Avant que la déstructuration n'existe en JavaScript, le même code ressemblait à ça :
const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];
Pas dramatique, mais ça devient vite répétitif quand tu le fais dans chaque fonction.
La déstructuration d'objet se base sur les noms de propriétés
Pour les objets, les noms entre accolades doivent correspondre aux propriétés de la source. L'ordre n'a aucune importance — JavaScript va chercher chaque valeur par sa clé.
Si une propriété n'existe pas sur l'objet, la variable vaut undefined — aucune erreur n'est levée :
Ce comportement silencieux qui renvoie undefined est à garder en tête : une faute de frappe dans un nom de propriété, et vous voilà à 2h du matin à vous demander ce qui cloche.
Renommer une variable lors du destructuring
Parfois, le nom de la propriété sur l'objet ne vous convient pas comme nom de variable — peut-être qu'il entre en conflit avec autre chose dans la portée, ou que l'API suit une convention de nommage que vous n'aimez pas trop. Utilisez la syntaxe original: nouveauNom pour le rebaptiser :
À lire comme ceci : « prends la propriété id et appelle-la userId ». Le nom de la propriété vient d'abord, puis le nouveau nom de variable après les deux-points. Ça ressemble à une annotation de type comme dans d'autres langages — mais ça n'en est pas une.
Valeurs par défaut
Si une propriété risque d'être absente, définis une valeur par défaut directement dans le motif de déstructuration :
Les valeurs par défaut ne s'appliquent que lorsque la valeur est undefined. À l'inverse, null, 0 et "" passent tels quels, sans être remplacés :
Celui-là en piège plus d'un. Si tu veux que null déclenche aussi la valeur par défaut, il faut une vérification explicite — ou alors utiliser l'opérateur de coalescence des nuls ?? après la déstructuration.
Tu peux cumuler valeurs par défaut et renommage :
La déstructuration de tableau se fait par position
Les tableaux n'ont pas de noms, juste des indices : le pattern fonctionne donc par position. Pour sauter une valeur qui ne t'intéresse pas, laisse simplement une virgule vide :
Les deux virgules en début de tableau signifient « saute l'index 0 et l'index 1 ». C'est un peu dense à lire, mais bien pratique quand tu ne veux récupérer qu'une seule valeur au milieu.
Le destructuring de tableau prend tout son sens avec les fonctions qui renvoient des tuples :
Le même schéma revient partout avec les hooks React : const [count, setCount] = useState(0).
Le rest operator : récupérer ce qui reste
Dans un motif de destructuration, ...nom rassemble dans une nouvelle variable tout ce qui n'a pas été capturé par nom ou par position.
Pour un tableau, le rest récupère la fin :
Pour les objets, le rest récupère toutes les propriétés qui n'ont pas été nommées explicitement :
C'est la façon idiomatique de retirer un champ d'un objet sans le muter — rest est un nouvel objet qui contient tout sauf id.
Le rest doit toujours être placé en dernier dans le motif. const [...init, last] provoque une erreur de syntaxe.
Déstructuration imbriquée
Les motifs s'imbriquent. Si une propriété est elle-même un objet ou un tableau, tu peux la déstructurer dans la même expression :
Puissant, oui, mais à manier avec précaution. Dès qu'on enchaîne trois niveaux d'accolades imbriquées, on a vite l'impression de résoudre une énigme. Quand ça arrive, extrais des valeurs intermédiaires dans leurs propres variables — la lisibilité prime toujours sur la virtuosité.
Un piège classique : dans le motif, data: { user } ne crée pas de variable nommée data. C'est une instruction qui dit « descends dans data et continue la déstructuration ». Si tu veux récupérer data en tant que tel, il faut l'ajouter à part :
La déstructuration dans les paramètres de fonction
L'endroit où vous allez le plus souvent utiliser la déstructuration en JavaScript, c'est dans la liste des paramètres d'une fonction. Ça transforme un banal « on passe un objet d'options » en une signature qui se documente toute seule :
Côté appel, ça ressemble à n'importe quelle fonction qui prend un objet d'options. Mais à l'intérieur, tu récupères directement des variables nommées avec leurs valeurs par défaut — fini le options.name || "default" à rallonge.
Attention quand même à un piège : si tu appelles cette fonction sans argument, ça plante, parce qu'on ne peut pas déstructurer undefined. La solution, c'est de donner une valeur par défaut au paramètre entier :
Le = {} qui suit le motif veut dire : « si aucun argument n'est passé, fais comme si c'était un objet vide ». Ensuite, les valeurs par défaut internes prennent le relais.
Échanger et réassigner des variables
La déstructuration fonctionne aussi avec des variables déjà déclarées, mais il faut entourer le motif objet de parenthèses (sinon JavaScript interprète le { comme le début d'un bloc) :
L'échange de valeurs dans un tableau est vraiment élégant. La réassignation sur un objet est plus rare, mais l'astuce des parenthèses vaut le coup d'être gardée sous le coude pour le jour où tu en auras besoin.
Un exemple concret
Voici un cas qui combine la plupart des notions vues plus haut : une fonction qui traite la réponse d'une API.
Chaque niveau de déstructuration a sa valeur par défaut, et la fonction survit donc à des données partielles sans une avalanche de if pour se protéger. C'est là tout l'intérêt : des signatures à la fois précises et tolérantes.
La suite : le spread d'objets
La déstructuration sort les valeurs d'un objet. Le spread, lui, les y injecte — pour copier, fusionner ou écraser. En JavaScript moderne, les deux vont rarement l'un sans l'autre, et c'est justement le spread qu'on va voir maintenant.
Questions fréquentes
C'est quoi le destructuring en JavaScript ?
Le destructuring (ou déstructuration) est une syntaxe qui permet d'extraire des valeurs d'un objet ou d'un tableau et de les affecter à des variables en une seule étape. const { name } = user; récupère la propriété name de user. const [first, second] = list; récupère les deux premiers éléments de list. En gros, c'est un motif à gauche du = qui imite la forme de la valeur à droite.
Comment renommer une variable pendant le destructuring ?
On utilise la syntaxe { nomOriginal: nouveauNom }. Par exemple, const { name: username } = user; récupère la propriété name de user et la stocke dans une variable locale username. Attention, c'est facile de lire ça comme une annotation de type — retiens bien que le nom de la propriété vient en premier, puis le nouveau nom de variable après les deux-points.
Peut-on définir des valeurs par défaut avec le destructuring ?
Oui, sans problème. const { timeout = 5000 } = options; utilisera 5000 si options.timeout vaut undefined. Attention : les valeurs par défaut ne s'appliquent qu'à undefined — null, 0 et '' passent tels quels. Tu peux aussi combiner défaut et renommage : const { t: timeout = 5000 } = options;.
Quelle est la différence entre destructuring et spread ?
Ça se ressemble visuellement, mais ça fait l'inverse. Le destructuring (const { a, b } = obj) sort des valeurs d'une structure. Le spread (const copy = { ...obj }) met des valeurs dans une nouvelle structure. Et le ... à l'intérieur d'un motif de destructuring, c'est un rest pattern : il collecte tout ce qui reste dans une nouvelle variable.
