Quand on utilise JavaScript on fait beaucoup usage des objets et tableaux. Il arrive également souvent qu'on ait besoin de certaines informations d'un objet ou d'un tableau dans des variables. On peut évidemment le faire avec ES5, mais on va voir dans ce chapitre que ES6 nous offre un outil bien pratique : la destructuration.‌

Déstructurons un objet

Vous avez un objet et vous voulez extraire ses données. Avec ES5 vous procédez ainsi :

var identite = { nom: 'Durand', prenom: 'Pierre' };
var nom = identite.nom;
var prenom = identite.prenom;
console.log(nom);  // Durand
console.log(prenom);  // Pierre

On a un code simple mais il pourrait rapidement s'alourdir avec un objet complexe ou chargé.

Avec ES6 vous pouvez utiliser cette syntaxe :

let identite = { nom: 'Durand', prenom: 'Pierre' };
let {nom, prenom} = identite;
console.log(nom);  // Durand
console.log(prenom);  // Pierre

• La valeur de la propriété nom de l'objet identite est copiée dans la variable nom.
• La valeur de la propriété prenom de l'objet identite est copiée dans la variable prenom.

Creusons

Vous pouvez aller aussi profondément dans l'objet que vous le désirez :

let personne = { 
  identite: { nom: 'Durand', prenom: 'Pierre' },
  age: 20
};
let { identite: { nom, prenom }, age } = personne;
console.log(nom)  // Durand
console.log(prenom)  // Pierre
console.log(age)  // 20

Alias

Pour éviter des conflits de noms vous pouvez assigner des alias :

let personne = { 
  identite: { nom: 'Durand', prenom: 'Pierre' },
  age: 20
};
let { identite: { nom: identiteNom, prenom: identitePrenom }, age: identiteAge } = personne;
console.log(identiteNom)  // Durand
console.log(identitePrenom)  // Pierre
console.log(identiteAge)  // 20

Valeur par défaut

Que se passe-t-il pour une propriété non trouvée ?

Le comportement est exactement le même que lorsqu'on utilise l'extraction d'une propriété d'un objet avec la syntaxe classique, la valeur est undefined :

let personne = {nom: 'Durand', prenom: 'Pierre'};
let { nom, prenom, age } = personne;
console.log(nom)  // Durand
console.log(prenom)  // Pierre
console.log(age)  // undefined

Mais vous pouvez prévoir une valeur par défaut :

let personne = {nom: 'Durand', prenom: 'Pierre'};
let { nom, prenom, age = 20 } = personne;
console.log(nom)  // Durand
console.log(prenom)  // Pierre
console.log(age)  // 20

Déstructurons un tableau

Pour un tableau ça fonctionne de la même manière mais avec des crochets :

let prenoms = [ 'Pierre', 'Jacques', 'Paul' ];
let [ prenomUn, prenomDeux, prenomTrois ] = prenoms;
console.log(prenomUn); // Pierre
console.log(prenomDeux); // Jacques
console.log(prenomTrois); // Paul

Avec un tableau on doit choisir des noms pour les variables puisque à la base on a juste des index. Mais rien n'empêche de déclarer auparavant les variables :

let prenoms = [ 'Pierre', 'Jacques'];
let prenomUn = 'Paul';
let prenomDeux = 'Martin';
[ prenomUn, prenomDeux ] = prenoms;
console.log(prenomUn); // Pierre
console.log(prenomDeux); // Jacques

On peut récupérer un nombre limité d'éléments si on veut :

let prenoms = [ 'Pierre', 'Jacques', 'Paul' ];
let [ prenomUn, prenomDeux ] = prenoms;
console.log(prenomUn); // Pierre
console.log(prenomDeux); // Jacques

Pour le cas où on veut sauter des éléments on utilise cette syntaxe :

let prenoms = [ 'Pierre', 'Jacques', 'Paul' ];
let [ , , prenomTrois ] = prenoms;
console.log(prenomTrois); // Paul

Creusons

Comme pour les objets on peut aller chercher des données imbriquées :

let prenoms = [ 'Pierre', ['Jacques']];
let [ prenomUn, [ prenomDeux ] ] = prenoms;
console.log(prenomUn); // Pierre
console.log(prenomDeux); // Jacques

Valeur par défaut

Comme pour les objets on peut prévoir une valeur par défaut :

let prenoms = [ 'Pierre' ];
let [ prenomUn, prenomDeux = 'Paul' ] = prenoms;
console.log(prenomUn); // Pierre
console.log(prenomDeux); // Paul

Inversion de variables

Il arrive qu'on ait besoin de permuter les valeurs de deux variables. Avec ES5 il faut passer par une variable temporaire :

var prenomUn = 'Pierre';
var prenomDeux = 'Paul';
var temp = prenomUn;
prenomUn = prenomDeux;
prenomDeux = temp;
console.log(prenomUn); // Paul
console.log(prenomDeux); // Pierre

Avec la déstructuration la syntaxe est plus légère et lisible :

let prenomUn = 'Pierre';
let prenomDeux = 'Paul';
[ prenomUn, prenomDeux ] = [ prenomDeux, prenomUn ];
console.log(prenomUn); // Paul
console.log(prenomDeux); // Pierre

Paramètre du reste

Je vous ai déjà parlé du paramètre du reste pour les fonctions. On peut aussi l'utiliser dans la déstructuration. Voici un exemple :

let prenoms = [ 'Pierre', 'Jacques', 'Paul' ];
let [ prenomUn, ...autres ] = prenoms;
console.log(prenomUn); // Pierre
console.log(autres[0]); // Jacques
console.log(autres[1]); // Paul

Des cas d’utilisation

Si vous avez une fonction qui retourne un objet il peut être pratique de déstructurer l'objet :

function getIdentite () {
  return { nom: 'Dupont', prenom: 'Pierre' };
}
var {nom, prenom} = getIdentite();
console.log(nom);  // Dupont
console.log(prenom);  // Pierre

Avec ES5 ça serait plus laborieux...

On peut considérer le problème inverse :

function dessineUnCercle ({ centre: { x = 10, y = 10 }, rayon = 20 }) {
  console.log(x, y, rayon);  // 5, 10, 20
}
dessineUnCercle({ centre: { x: 5 }});

Là aussi écrivez l'équivalent avec ES5 !

En résumé

• La déstructuration permet d'extraire les données d'un objet ou un tableau dans des variables.
• On peut prévoir des alias et des valeurs par défaut.
• La déstructuration permet de simplifier la syntaxe : inversion de variables, arguments de fonctions...‌