Destructuring en JavaScript : Objets et Tableaux
Extraire des valeurs en une ligne — syntaxe, valeurs par défaut, renommage, rest et cas d'usage
Le principe
Le destructuring (ES6) permet d'extraire des propriétés d'un objet ou des éléments d'un tableau directement dans des variables, sans passer par des lignes intermédiaires.
const user = ;
const nom = user.nom;
const age = user.age;
const ville = user.ville;
// ✅ Avec destructuring — même résultat
const = user;
Destructuring d'objets
// Extraire certaines propriétés
const = user;
console.log(nom); // « Alice »
console.log(age); // 25
// Renommer les variables
const = user;
console.log(username); // « Alice »
console.log(userAge); // 25
// Extraire en profondeur
const = response;
console.log(nom); // « Alice »
console.log(ville); // « Paris »
Le destructuring imbriqué profond peut vite devenir illisible. Au-delà de 2 niveaux, envisage d'extraire par étapes ou d'utiliser l'optional chaining : response?.data?.user?.nom.
Destructuring de tableaux
// Extraire par position
const [first, second, third] = colors;
console.log(first); // « rouge »
console.log(third); // « bleu »
// Ignorer des éléments avec des virgules
const [, , last] = colors;
console.log(last); // « bleu »
// Swap de variables (sans variable temporaire)
let a = 1, b = 2;[a, b] = [b, a];
console.log(a, b); // 2, 1
// Retour multiple d'une fonction (comme useState en React)
function getMinMax(arr)
const [min, max] = getMinMax([3, 1, 7, 2]);
// min = 1, max = 7
La différence clé : le destructuring d'objet utilise les noms de propriétés (). Le destructuring de tableau utilise la position ([first, second]). Tu peux nommer les variables comme tu veux avec les tableaux.
Valeurs par défaut
Si la propriété n'existe pas ou vaut undefined, la valeur par défaut est utilisée :
const = ;
console.log(role); // « user » (valeur par défaut)
// Renommage + valeur par défaut
const = ;
// Tableaux
const [a = 0, b = 0, c = 0] = [10, 20];
console.log(a, b, c); // 10, 20, 0
// ⚠️ La valeur par défaut ne s'applique que pour undefined, PAS null
const = ;
console.log(x); // null (pas 5 !)
// Pour gérer null aussi, utilise ??
const = ;
const x = rawX ?? 5; // 5
Le rest operator (…)
const user = ;
const = user;
console.log(nom); // « Alice »
console.log(rest); //
// Tableaux — extraire le début, garder le reste
const [first, second, …others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [3, 4, 5]
// Pattern courant : retirer une propriété d'un objet
const = user;
// safeUser = — sans motDePasse
// Rest dans les paramètres de fonction
function sum(…numbers)
sum(1, 2, 3); // 6
…rest doit toujours être le dernier élément du destructuring. Il collecte tout ce qui n'a pas été explicitement extrait.
Destructuring dans les paramètres
Le destructuring dans les paramètres évite de passer un objet et d'accéder manuellement aux propriétés :
function createUser(options)
// ✅ Avec destructuring dans les paramètres
function createUser()
createUser();
// « Alice » 25 « user »
// Arrow function avec destructuring
const getFullName = () => `$ $`;
// Dans un callback
const users = [
,
,
];
const noms = users.map(() => nom);
// [« Alice », « Bob »]
const majeurs = users.filter(() => age >= 18);
function createUser( = )
createUser(); // « Anonyme » « user » — pas de crash
createUser(); // « Alice » « user »
Sans le = par défaut, appeler createUser() sans argument provoquerait une erreur car JavaScript essaierait de destructurer undefined.
Patterns courants
const response = await fetch(« /api/users »);
const = await response.json();
// Promise.allSettled
const results = await Promise.allSettled([fetchA(), fetchB()]);
for (const of results)
const [count, setCount] = useState(0);
const [isOpen, setIsOpen] = useState(false);
// Props — destructuring d'objet
function UserCard() {
return <div> ({age})</div>;
}
import from « react »;
import from « fs/promises »;
// for…of + entries (destructuring dans la boucle)
for (const [index, item] of items.entries())
// Object.entries
for (const [key, val] of Object.entries(config))
Erreurs fréquentes
| Erreur | Problème | Solution |
|---|---|---|
| Destructurer undefined ou null | TypeError: Cannot destructure | Ajouter = ou vérifier avant |
| Confondre et [] | Mauvais type de destructuring | pour objets, [] pour tableaux |
| Oublier le renommage | Conflit de nom de variable | |
| Destructuring trop imbriqué | Code illisible | Max 2 niveaux, extraire par étapes |
| Valeur par défaut ignorée avec null | null n'est pas undefined | Utiliser ?? après le destructuring |
Questions fréquentes
🔤 let, const, var
➡️ Fonctions fléchées
📦 Tableaux : map, filter, reduce
🔁 Boucles
📄 JSON
⚡ Cours JavaScript complet
🏠 Hub Programmation
Destructuring en JavaScript — Objets et tableaux
Référence : MDN Destructuring