Le destructuring : extraire exactement ce dont vous avez besoin
Extraire des propriétés d’objet par leur nom et des éléments de tableau par leur position, avec renommage, valeurs par défaut et décomposition imbriquée.
Où en êtes-vous avec cette notion ?
Une indication personnelle, enregistrée uniquement dans ce navigateur.
À lire ensuite
Le format café
L’essentiel à comprendre, le temps d’un café.
Envie de creuser ? Un cours plus complet vous attend juste après, à déplier sans quitter cette page.
Ce que vous allez comprendre
Le destructuring — la décomposition — permet d’extraire plusieurs valeurs d’un objet ou d’un tableau en une seule ligne. Les objets se lisent par le nom des propriétés, les tableaux par la position.
Les objets : par le nom
// Node.js ou console du navigateur.
const user = { id: 42, name: 'Jean', email: 'jean@example.com' };
const { name, email } = user;
console.log(name); // 'Jean'
console.log(email); // 'jean@example.com'
user
├── name ─────► variable name
└── email ─────► variable email
L’ordre d’écriture n’a aucune importance : seuls les noms comptent. Et si le nom ne vous convient pas, renommez-le au passage :
const { name: userName } = user;
console.log(userName); // 'Jean'
Lisez name: userName comme « prends name, range-le dans une variable appelée userName ». C’est très utile quand deux objets ont des propriétés homonymes.
Les tableaux : par la position
const couleurs = ['rouge', 'vert', 'bleu'];
const [premiere, deuxieme] = couleurs;
console.log(premiere); // 'rouge'
console.log(deuxieme); // 'vert'
Ici les noms sont libres, c’est le rang qui décide. C’est exactement ce que vous lisez dans un composant React :
const [count, setCount] = useState(0);
useState renvoie un tableau de deux éléments : la valeur actuelle, puis la fonction qui la modifie. Même mécanisme pour les props : function UserCard({ name }) décompose l’objet des propriétés reçues.
Une valeur figée, pas un lien vivant
const utilisateur = { nom: 'Jean' };
const { nom } = utilisateur;
utilisateur.nom = 'Pierre';
console.log(nom); // 'Jean'
console.log(utilisateur.nom); // 'Pierre'
La décomposition lit la valeur au moment où elle s’exécute. Elle ne crée pas de copie synchronisée. C’est une source fréquente d’étonnement quand la donnée change ensuite.
Fiche mémo
| Source | Clé de lecture | Écriture |
|---|---|---|
| Objet | le nom de la propriété | const { name } = user; |
| Tableau | la position | const [a, b] = liste; |
| Renommage | nom d’origine à gauche | const { name: userName } = user; |
L’idée à emporter : la décomposition ne change pas la donnée, elle change seulement la façon dont vous la nommez — au moment précis où la ligne s’exécute.
Et si on allait plus loin ?
Le café vous a donné les repères. Prenez maintenant le temps de comprendre les mécanismes et de pratiquer, si vous le souhaitez.
Aller plus loinValeurs par défaut, paramètres et objets imbriqués : décomposer sans casserDévelopper le coursReplier le cours
Ce que vous saurez faire
Poser une valeur par défaut au bon endroit, décomposer directement les paramètres d’une fonction, et lire un objet imbriqué venu d’une API sans provoquer d’erreur. Tous les exemples se lisent avec Node.js ou dans la console du navigateur ; aucune API réelle n’est appelée, les données sont écrites en dur.
1. Une valeur par défaut ne se déclenche que pour undefined
C’est le point que la plupart des présentations laissent implicite : la valeur par défaut ne remplace pas « une valeur vide ». Elle remplace exactement undefined, et rien d’autre.
// Node.js ou console du navigateur.
const user = { nom: 'Jean', role: null, age: undefined };
const { nom, role = 'membre', age = 0, ville = 'Inconnue' } = user;
console.log(nom); // 'Jean'
console.log(role); // null : null n’est pas undefined, le défaut ne s’applique pas
console.log(age); // 0 : la propriété vaut undefined, le défaut s’applique
console.log(ville); // 'Inconnue': la propriété est absente, donc undefined
Une propriété absente et une propriété valant undefined sont traitées de la même façon. Une propriété valant null, 0, '' ou false garde sa valeur. Si vous voulez aussi couvrir null, il faut un autre outil, par exemple role ?? 'membre'.
Renommage et valeur par défaut se combinent, dans cet ordre :
const { ville: villeUtilisateur = 'Inconnue' } = user;
console.log(villeUtilisateur); // 'Inconnue'
Référence : affectation par décomposition.
2. Décomposer les paramètres d’une fonction
La décomposition fonctionne directement dans la signature. C’est ce que fait React avec function UserCard({ name }).
function creerBadge({ nom, role = 'membre' }) {
return nom + ' — ' + role;
}
console.log(creerBadge({ nom: 'Alice' })); // 'Alice — membre'
console.log(creerBadge({ nom: 'Bob', role: 'admin' })); // 'Bob — admin'
console.log(creerBadge()); // TypeError
Le dernier appel échoue : on ne peut pas décomposer undefined. La parade est une valeur par défaut sur le paramètre lui-même :
function creerBadge({ nom = 'Anonyme', role = 'membre' } = {}) {
return nom + ' — ' + role;
}
console.log(creerBadge()); // 'Anonyme — membre'
Le = {} s’applique quand l’argument entier est absent ; les défauts internes s’appliquent ensuite, propriété par propriété.
3. Décomposition imbriquée, et ce qu’elle exige
const reponse = {
data: { utilisateur: { nom: 'Jean', adresse: { ville: 'Montpellier' } } },
};
const {
data: {
utilisateur: { nom, adresse: { ville } },
},
} = reponse;
console.log(nom, ville); // Jean Montpellier
Attention à une subtilité : data: et utilisateur: ne créent aucune variable. Ce sont des chemins de descente. Seuls nom et ville existent après cette ligne.
La limite arrive dès qu’un objet intermédiaire manque :
const partiel = { data: { utilisateur: { nom: 'Bob' } } };
const {
data: {
utilisateur: { adresse: { ville: v } },
},
} = partiel;
// TypeError : impossible de décomposer une propriété de undefined
adresse vaut undefined, et on ne peut pas décomposer undefined. Deux solutions : une valeur par défaut à chaque niveau traversé, ou le chaînage optionnel.
const {
data: {
utilisateur: { adresse: { ville: v = 'Inconnue' } = {} },
},
} = partiel;
console.log(v); // 'Inconnue'
console.log(partiel.data?.utilisateur?.adresse?.ville ?? 'Inconnue'); // 'Inconnue'
Au-delà de deux niveaux, le chaînage optionnel reste souvent plus lisible que la décomposition profonde.
Référence : chaînage optionnel.
Pièges et limites
nulln’est pasundefined. Une valeur par défaut ne le remplace pas, et décomposernullouundefinedlève uneTypeError.- Un objet intermédiaire absent casse la ligne entière. Prévoyez
= {}à chaque niveau traversé, ou passez au chaînage optionnel. - La valeur est figée à l’exécution.
const { nom } = userne suit pas les modifications ultérieures deuser.nom. - Le renommage ne crée pas la variable intermédiaire. Après
const { data: { id } } = reponse, la variabledatan’existe pas. - Pour un tableau, un rang absent vaut
undefined.const [a, b, c] = ['x']laissebetcàundefined; une valeur par défaut s’y applique aussi. - Sans mot-clé de déclaration, les parenthèses sont obligatoires.
({ nom } = user);fonctionne,{ nom } = user;est une erreur de syntaxe.
À vous de jouer
Vous recevez cette liste, où certaines informations manquent :
const reponses = [
{ id: 1, nom: 'Alice', profil: { ville: 'Lyon', langue: 'fr' } },
{ id: 2, nom: 'Bob', profil: { langue: 'en' } },
{ id: 3, nom: 'Chloé' },
];
Écrivez une fonction decrire qui prend une réponse et renvoie une chaîne de la forme 'Alice — Lyon (fr)'. La ville manquante devient 'Ville non renseignée', la langue manquante 'fr'. Aucun des trois éléments ne doit provoquer d’erreur. Utilisez la décomposition dans le paramètre, sans accéder aux propriétés une par une dans le corps.
Correction commentée
// Node.js ou console du navigateur.
function decrire({ nom, profil: { ville = 'Ville non renseignée', langue = 'fr' } = {} }) {
return nom + ' — ' + ville + ' (' + langue + ')';
}
console.log(reponses.map(decrire));
// [
// 'Alice — Lyon (fr)',
// 'Bob — Ville non renseignée (en)',
// 'Chloé — Ville non renseignée (fr)'
// ]
Trois mécanismes se combinent, chacun à son niveau.
Le = {} placé après profil: { … } est celui qui sauve le troisième élément : Chloé n’a pas de profil, la propriété vaut donc undefined, et sans ce défaut la décomposition lèverait une TypeError. Avec lui, la descente se poursuit dans un objet vide.
Les défauts ville = … et langue = … traitent ensuite chaque propriété séparément. C’est ce qui donne le bon résultat pour Bob : son profil existe et sa langue est conservée, seule ville — absente, donc undefined — reçoit la valeur de remplacement.
Enfin, profil: ne crée aucune variable profil : c’est un chemin. Seuls nom, ville et langue sont utilisables dans le corps, ce qui est exactement ce que demandait l’énoncé.
Une limite à connaître : si un profil valait null au lieu d’être absent, le = {} ne s’appliquerait pas et l’appel lèverait une TypeError. Face à une API qui renvoie null, normalisez la donnée avant, ou passez par reponse.profil?.ville ?? 'Ville non renseignée'.
Vous pouvez aussi vous arrêter ici. L’approfondissement est facultatif.
Les repères Cours Café
Pour aller à la source
Documentation de référence. Vérification éditoriale encore à effectuer.
Gardez une trace de cette idée.
Favoris, notes et progression seront disponibles après connexion du stockage distant.