2.8. Les Affectations déstructurées, ou le ‘Destructuring’

Le nom barbare de ‘déstructuration’ désigne en fait un concept assez simple. C’est un outil formidable pour extraire des données d’un tableau. Jetons un coup d’œil à un exemple de déstructuration d’un tableau :

let [premier, deuxieme, troisieme] = ["Usain", "Yohan", "Justin"];

Voilà, vous venez de déstructurer un tableau ! Les valeurs du tableau affecté sont automatiquement attribuées à partir des valeurs du tableau de droite. Voici ce que cela donne concrètement :

console.log(premier); // "Usain"
console.log(deuxieme); // "Yohan"
console.log(troisieme); // "Justin"

Sans les affectations déstructurées, votre travail aurait été pénible :

let prenoms = ["Usain", "Yohan", "Justin"];

let premier = prenoms[0];
let deuxieme = prenoms[1];
let troisieme = prenoms[2];

console.log(premier); // "Usain"
console.log(deuxieme); // "Yohan"
console.log(troisieme); // "Justin"

Est-ce que ça marche pour les objets aussi ?

Bien sûr ! Et c’est même plus utilisé avec les objets qu’avec les tableaux.

var Personne = {prenom: "Usain", nom: "Bolt"};
// La destructuration d'un objet ! 
var {prenom, nom} = Personne;

C’est quand même plus pratique que d’écrire :

var prenom = personne.prenom;
var nom = personne.nom;

Nous utiliserons souvent le destructuring avec React, notamment pour importer seulement certaines fonctions ou méthodes d’un module :

import { uneMethodeUtile } from 'react-all-tools'; // exemple fictif

Vous êtes prévenus, n’hésitez pas à revenir sur cette étape en cas de doute plus loin dans le cours.