Déstructuration
La déstructuration affecte des propriétés d’un object ou des éléments d’un array à des variables grâce à un motif. Elle ne modifie pas la source. Nous utiliserons cette commande :
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Déstructuration simple d’un object
Les noms placés dans {} sélectionnent les propriétés homonymes de la valeur à droite et créent deux constantes.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
Le résultat est lida, puis tea. C’est une forme courte de order.guest et order.drink ; aucune propriété n’est retirée de order.
Renommer et fournir une valeur par défaut
Le motif property: variable choisit un autre nom de variable. La valeur après = ne s’applique que si la propriété vaut undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer reçoit lida. Comme size est absente, size reçoit regular. Aucune variable nommée guest n’est créée par ce motif.
Lire une propriété imbriquée
Un motif imbriqué suit la forme de l’object. La partie { city } lit city dans order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
Le résultat est rasht et aucune variable address n’est créée. Si address manque ou vaut undefined, la lecture de city peut provoquer une erreur. L’optional chaining ne s’insère pas dans ce motif ; vérifiez ou normalisez d’abord la valeur.
Déstructuration d’un array
Les crochets [] associent les éléments selon leur position. La première variable reçoit l’index 0, la seconde l’index 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
Le résultat est mint, puis lemon. Vous choisissez les noms, mais la position détermine la valeur. order.extras conserve ses deux éléments.
Déstructurer un paramètre
Une fonction peut extraire les propriétés reçues directement dans sa liste de paramètres. Celle-ci n’utilise que guest et drink.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
L’appel renvoie lida ordered tea. Le motif est appliqué au moment de l’appel ; passer null ou undefined provoque une erreur si la fonction ne gère pas ce cas.
Démonstration complète
Cette page combine la déstructuration d’object, d’array et de paramètre, puis affiche le résumé de la commande.
<!doctype html>
<html lang="fr">
<head><meta charset="utf-8"><title>Déstructuration JavaScript</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
Le résultat visible est exactement lida / tea / mint. La fonction lit uniquement les données utiles et ne modifie pas order.
include_try
Renommez drink en beverage, puis donnez une valeur par défaut à la propriété absente table. Testez ensuite une commande sans address et vérifiez-la avant le motif imbriqué.
mistakes
Ne confondez pas propriété et variable renommée. Une valeur par défaut ne remplace pas null, et l’object imbriqué peut manquer. {} correspond aux propriétés, [] aux positions ; la source reste intacte. Rest et spread seront traités dans spread-rest.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut