Destructuring

JavaScript 🟢 Junior

Définition

Syntaxe ES6 pour extraire des valeurs d'objets ou tableaux dans des variables distinctes. Supporte les valeurs par défaut, le renommage et l'imbrication.

Analogie

Ouvrir un colis et ranger chaque article directement dans le bon tiroir au lieu de tout laisser dans le carton.

Exemple de code

const { name, age = 25 } = user;
const [first, ...rest] = [1, 2, 3];
// Nested
const { address: { city } } = user;
// Rename
const { name: userName } = user;

Cas d'usage

Extraire proprement les props d'un composant React, les champs d'une réponse API, les arguments de fonction.

Anti-pattern

Déstructurer trop profondément en une ligne, rendant le code illisible.
#core#ES6#syntaxe

← → au clavier pour passer d'une fiche à l'autre