let { nom, prenom } = { nom: "Jean", prenom: "Dupont" };
nom // "Jean"
prenom // "Dupont"

La destructuration des objets diffère des tableaux car les propriétés des objets ne sont pas ordonnées. Les variables doivent correspondre exactement aux noms des propriétés pour récupérer leurs valeurs. Si les noms ne correspondent pas, il faut utiliser la syntaxe suivante :

let { nom: alias } = { nom: 'Jean', age: 30 };
alias // "Jean"
nom // Erreur : nom n'est pas défini

Cela signifie que la desturcturation des objets est une forme raccourcie de l'opération suivante :

let { nom: nom, prenom: prenom } = { nom: "Jean", prenom: "Dupont" };

Ainsi, la destructuration des objets fonctionne en identifiant d'abord les propriétés homonymes, puis en affecatnt leurs valeurs aux variables correspondantes.

La destructuration peut être utilisée pour des structures imbriquées. Par exemple :

let obj = {
  personnes: [
    'Alice',
    { y: 'Bob' }
  ]
};

let { personnes: [x, { y }] } = obj;
x // "Alice"
y // "Bob"

Ici, personnes est une structure de模版, pas une variable, donc elle n'est pas assignée. Si vous souhaitez également assigner personnes comme variable, vous pouvez faire comme suit :

let obj = {
  personnes: [
    'Alice',
    { y: 'Bob' }
  ]
};

let { personnes, personnes: [x, { y }] } = obj;
x // "Alice"
y // "Bob"
personnes // ["Alice", {y: "Bob"}]

Exemple supplémentaire :

const noeud = {
  position: {
    debut: {
      ligne: 1,
      colonne: 5
    }
  }
};

let { position, position: { debut }, position: { debut: { ligne } } } = noeud;
ligne // 1
position // Object { debut: Object }
debut // Object { ligne: 1, colonne: 5 }

Ce code effectue trois opérations de destructuration, respectivement sur position, debut, et ligne.

Voici un exemple d'affectation imbriquée :

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // { prop: 123 }
arr // [true]

Valeurs par défaut

var { x = 3 } = {};
x // 3

var { x, y = 5 } = { x: 1 };
x // 1
y // 5

var { x: y = 3 } = {};
y // 3

var { x: y = 3 } = { x: 5 };
y // 5

var { message: msg = 'Une erreur est survenue' } = {};
msg // "Une erreur est survenue"

Les valeurs par défaut ne sont utilisées que si la propriété de l'objet est strictement égale à undefined.

var { x = 3 } = { x: undefined };
x // 3

var { x = 3 } = { x: null };
x // null

Dans l'exemple ci-dessus, la propriété x est égale à null, qui n'est pas strictement égale à undefined, donc la valeur par défaut 3 ne s'applique pas.

Si la destructuration échoue, la variable aura la valeur undefined.

let { foo } = { baz: 'baz' };
foo // undefined

Si la structure de destructuration est un objet imbriqué et que la propriété parente correspondant n'existe pas, une erreur se produit :

// Erreur
let { foo: { bar } } = { baz: 'baz' };

Cela se produit car foo est undefined, donc l'accès à bar génère une erreur.

Si vous souhaitez utiliser une variable déjà déclarée pour la destructuration, il faut éviter que JavaScript interprète les accolades comme un bloc. Par exemple :

// Syntaxe incorrecte
let x;
{x} = {x: 1};
// SyntaxError: erreur de syntaxe

// Syntaxe correcte
let x;
({x} = {x: 1});

Enfin, la destructuration des objets peut être utilisée pour extraire des méthodes d'un objet existant :

let { log, sin, cos } = Math;

Cela permet d'utiliser les méthodes log, sin, et cos de l'objet Math directement sous ces noms.

Les tableaux, étant des objets particuliers, peuvent être déstructurés comme des objets :

let arr = [1, 2, 3];
let { 0: premier, [arr.length - 1]: dernier } = arr;
premier // 1
dernier // 3

Ici, la propriété 0 du tableau correspond à la valeur 1, et la propriété arr.length - 1 (qui est 2) correspond à la valeur 3.