Destructuring

JavaScript 🟢 Junior

Definition

Syntaxe ES6 pour extraire des valeurs d'objets ou tableaux dans des variables distinctes. Supporte les valeurs par defaut, 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 reponse API, les arguments de fonction.

Anti-pattern

Destructurer trop profondement en une ligne, rendant le code illisible.
#core#ES6#syntaxe