Déstructuration
La déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
Exemple
#const student = { name: 'Léa', level: 3, course: 'JavaScript' }
const { name, level } = student
const podium = ['Emma', 'Lucas', 'Léa']
const [winner, second] = podium
console.log(name, level)
console.log(winner, second)Définition et utilisation
#La déstructuration est une écriture raccourcie d’affectation. Au lieu de lire user.name puis user.level l’un après l’autre, vous écrivez const { name, level } = user et vous avez immédiatement deux variables. Pour les tableaux, les crochets récupèrent les éléments selon leur position : const [first, second] = list.
Pour les objets, ce qui compte, ce sont les noms de propriétés, pas l’ordre. Vous pouvez renommer la variable ({ name: userName }), donner une valeur par défaut pour le cas undefined ({ level = 1 }), et accéder à des objets imbriqués. L’écriture ...rest rassemble les éléments ou propriétés restants.
La déstructuration fonctionne aussi dans les paramètres de fonction et dans les boucles. Une fonction qui reçoit un objet de réglages déballe immédiatement les champs nécessaires, et for (const [key, value] of Object.entries(obj)) donne un accès pratique aux paires clé-valeur.
Syntaxe
#const [a, b] = array
const [first, , third] = array
const [head, ...rest] = array
const { a, b } = object
const { a: newName, b = defaultValue } = object
const { nested: { c } } = object
function fn({ a, b = 1 }) {}Plus d’exemples
#const settings = { theme: 'dark', sounds: false, fontSize: 18 }
const { theme: mode, language = 'fr', ...others } = settings
console.log(mode, language)
console.log(others)function createUser({ name, role = 'student', active = true }) {
return `${name}: ${role}, actif : ${active}`
}
console.log(createUser({ name: 'Lucas' }))
console.log(createUser({ name: 'Emma', role: 'mentor', active: false }))let first = 'HTML'
let second = 'CSS'
;[first, second] = [second, first]
console.log(first, second)Le point-virgule au début de la ligne protège contre une fusion avec l’instruction précédente, quand vous écrivez du code sans points-virgules. Une ligne commençant par [ pourrait être considérée comme la suite de la précédente.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Déstructurer
nullouundefinedlève uneTypeError. Pour un argument optionnel, ajoutez une valeur par défaut pour tout le paramètre :function fn({ a } = {}). - La valeur par défaut ne fonctionne que pour
undefined. Si le champ vautnull, la variable recevranull. - N’exagérez pas avec l’imbrication. Trois niveaux d’accolades sur une seule ligne sont difficiles à lire, il est plus clair de déballer les données en deux étapes.
Entrées associées
#- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
- Object.entries()Renvoie un tableau des paires [clé, valeur] d’un objet.
- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- for...ofParcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
- constDéclare une constante à portée de bloc. Une telle variable ne peut pas recevoir une nouvelle valeur.
- Paramètres par défautLes valeurs qu’un paramètre de fonction reçoit quand l’argument n’est pas fourni ou vaut undefined.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.