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.