Extraire trois propriétés d’un même objet, avant l’arrivée de la déstructuration, demandait trois lignes répétitives (const titre = article.titre; const id = article.id;…). La déstructuration condense cette opération en une seule ligne, en reproduisant la forme de l’objet ou du tableau source directement dans la déclaration de variables, à gauche du signe égal.
Un usage courant dans le JavaScript de WordPress
Le code des blocs de l’éditeur WordPress, écrit en React, repose massivement sur la déstructuration pour extraire les props d’un composant ou les valeurs renvoyées par un hook comme useState. On la retrouve aussi très souvent pour extraire des fonctions utilitaires depuis les objets globaux exposés par WordPress, comme wp.element ou wp.blocks.
Exemple
const { attributes, setAttributes } = props;
const [ nombre, setNombre ] = wp.element.useState( 0 );
const { titre, id } = article; // depuis un objet renvoyé par l'API RESTPièges fréquents
- Déstructurer une propriété absente d’un objet ne provoque pas d’erreur : la variable vaut simplement
undefined, ce qui peut masquer un bug plus loin dans le code sans avertissement immédiat. - Confondre la déstructuration de tableau (avec des crochets, basée sur la position) et celle d’objet (avec des accolades, basée sur le nom des clés) : les deux syntaxes se ressemblent mais suivent des règles différentes.
- Oublier qu’on peut renommer une valeur au passage (
const { titre: titreArticle } = article), utile pour éviter un conflit de nom avec une variable déjà existante.