# Déstructuration

> Syntaxe JavaScript qui extrait en une seule expression plusieurs valeurs d'un tableau ou d'un objet vers des variables distinctes, plutôt que de les accéder une à une.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/destructuration/

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 REST
```

## Piè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.