La déstructuration d'un tableau, aussi appelé "destructuring" en anglais, permet d'extraire des propriétés d'un tableau et de les attribuer à des variables.

Par exemple, pour définir 3 variables correspondant aux membres d'un groupe, il est possible de faire:

let singer = "Kurt";
let bassist = "Krist";
let drummer = "Dave";

mais avec la déstructuration, il est possible de simplifier le tout ainsi:

let [singer, bassist, drummer] = ["Kurt", "Krist", "Dave"];

Ces deux codes produisent un résultat identique.

Chaque valeur du tableau de droite est assignée au nom de variable dans le tableau de gauche se trouvant à la même position.

let band = ["Kurt", "Krist", "Dave"];
let [singer, bassist, drummer] = band;

Produira le résultat suivant:

console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Dave

La déclaration des variables et l'attribution de leurs valeurs peuvent être fait séparément:

let singer, bassist, drummer; // Déclaration
[singer, bassist, drummer] = ["Kurt", "Krist", "Dave"] // Attribution

Tableaux non équivalents

Plus de variables

Si moins de valeurs sont définies que de variables, les variables superflues se font attribuer la valeur undefined:

let band = ["Kurt", "Krist", "Dave"];
let [singer, bassist, drummer, dj] = band;
console.log(dj); // undefined

Plus de valeurs

Si moins de variables sont définies que de valeurs, les valeurs superflues sont ignorées sans engendrer d'erreur:

let band = ["Kurt", "Krist", "Dave", "Courtney"];
let [singer, bassist, drummer] = band;
console.log(drummer); // Dave

Avec une fonction

Si une fonction retourne un tableau, il est possible d'utiliser la déstructuration pour simplifier l'accès aux différentes valeurs.

Par exemple:

function getBand() {
  return ["Kurt", "Krist", "Dave"];
}

let [singer, bassist, drummer] = getBand();
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Dave

Valeurs par défaut

Déstructurer un tableau permet aussi d'attribuer des valeurs par défaut aux variables advenant le cas qu'aucune valeur ne leur soit attribuée.

Par exemple, si un tableau ne contenant aucune valeur est attribué:

let [singer = "🎤", bassist = "🎸", drummer = "🥁"] = [];
console.log(singer);  // 🎤
console.log(bassist); // 🎸
console.log(drummer); // 🥁

Et si un tableau avec des valeurs est attribué:

let [singer = "🎤", bassist = "🎸", drummer = "🥁"] = ["Kurt", "Krist", "Dave"];
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Dave

Une variable peut aussi avoir comme valeur par défaut la valeur d'une autre variable dans le même tableau.

Par exemple, si dans une chanson le chanteur joue aussi de la batterie (drum), il est possible de le spécifier ainsi:

let [singer = "🎤", bassist = "🎸", drummer = singer] = ["Kurt", "Krist"];
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Kurt

Ou si aucune valeur n'est spécifiée:

let [singer = "🎤", bassist = "🎸", drummer = singer] = [];
console.log(singer);  // 🎤
console.log(bassist); // 🎸
console.log(drummer); // 🎤

Ignorer des valeurs

Pour ignorer une valeur, il suffit de sauter une définition de variable:

let [singer, , drummer] = ["Kurt", "Krist", "Dave"];
console.log(singer);  // Kurt
console.log(drummer); // Dave

Paramètres du reste

Le paramètre du reste ou "Rest parameter" est une variable spéciale précédée par "…" dans le tableau de gauche ⬅️. Cette variable permet de regrouper dans un nouveau tableau toutes les valeurs restantes non attribuées à une variable spécifique.

let [singer, ...members] = ["Kurt", "Krist", "Dave"];
console.log(singer);  // Kurt
console.log(members); // ["Krist", "Dave"]

Décomposition

La syntaxe de décomposition ou "Spread operator" est une valeur spéciale précédée par "…" dans le tableau de droite ➡️. Cette valeur permet d'extraire des valeurs stockées dans un tableau et de les ajouter au tableau courant:

let members = ["Krist", "Dave"];
let [singer, bassist, drummer] = ["Kurt", ...members];
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Dave

Ainsi le tableau members est décomposé dans le tableau de droite.

Interchanger des variables

La déstructuration permet aussi d'échanger des valeurs de variable.

Par exemple, si le chanteur (singer) échange de position avec le batteur (drummer), il est possible de redéfinir les variables à l'aide d'un nouvel arrangement des valeurs dans le tableau de droite.

let [singer, bassist, drummer] = ["Kurt", "Krist", "Dave"];
[singer, bassist, drummer] = [drummer, bassist, singer];
console.log(singer);  // Dave
console.log(bassist); // Krist
console.log(drummer); // Kurt
👏
Merci

à Kevwe Ochuko et son article A brief introduction to array destructuring in ES6 sur freecodecamp.org qui a fortement inspiré cet article.