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

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

let band = {
  singer: "Kurt",
  bassist: "Krist",
  drummer: "Dave"
};

let singer = band.singer;
let bassist = band.bassist;
let drummer = band.drummer;

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

let band = {
  singer: "Kurt",
  bassist: "Krist",
  drummer: "Dave"
};

let { singer, bassist, drummer } = band;

Ces deux codes produisent un résultat identique.

Si un nom de variable définie entre parenthèses {} correspondant au nom d'une propriété définie dans l'objet attribué (band), alors la valeur de cette propriété est assignée à la variable du même nom.

Objets non équivalents

Plus de variables

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

let band = {
  singer: "Kurt",
  bassist: "Krist"
};

let { singer, bassist, drummer } = band;
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // undefined

Plus de propriétés

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

let band = {
  singer: "Kurt",
  bassist: "Krist",
  drummer: "Dave"
};

let { singer, bassist } = band;
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // undefined

Avec une fonction

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

Par exemple:

function getBand() {
  return {
    singer: "Kurt",
    bassist: "Krist",
    drummer: "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 objet permet aussi d'attribuer des valeurs par défaut aux variables advenant le cas où des propriétés seraient manquantes dans l'objet attribué.

Par exemple, si un objet ne contenant aucune propriété est attribué:

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

Et si un objet avec des propriétés est attribué:

let {
  singer = "🎤", 
  bassist = "🎸", 
  drummer = "🥁"
} = {
  singer: "Kurt", 
  bassist: "Krist", 
  drummer: "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 propriété dans le même objet.

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
} = {
  singer: "Kurt", 
  bassist: "Krist"
};
console.log(singer);  // Kurt
console.log(bassist); // Krist
console.log(drummer); // Kurt

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

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

Alias

Il est possible de créer une variable avec un nom différent que celui de la propriété équivalente. Pour ce faire, il faut attribuer un alias au nom de variable à l'aide des ":":

Par exemple, si le chanteur est aussi le guitariste et qu'on veut pouvoir y avoir accès avec la variable guitarist:

let band = {
  singer: "Kurt",
  bassist: "Krist",
  drummer: "Dave"
};

let { singer: guitarist, bassist, drummer } = band;

console.log(guitarist);  // Kurt
console.log(bassist); // Krist
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 "…". Cette variable permet de regrouper dans un nouvel objet toutes les propriétés restantes non attribuées à une variable spécifique.

let band = {
  singer: "Kurt",
  bassist: "Krist",
  drummer: "Dave"
};

let { singer, ...members } = band;

console.log(singer);  // Kurt
console.log(members); // {bassist: 'Krist', drummer: 'Dave'}

Décomposition

La syntaxe de décomposition ou "Spread operator" est une valeur spéciale précédée par "…". Cette valeur permet d'extraire les propriétés d'un objet et de les ajouter à l'objet courant:

let members = {
  bassist: "Krist",
  drummer: "Dave"
};

let { singer, bassist, drummer } = { singer: "Kurt", ...members };

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

à Dmitri Pavlutin et son article How to Use Object Destructuring in JavaScript qui a fortement inspiré cet article.