ES6 – Destructuring

EcmaScript 2015 introduit de nombreuses fonctionnalités. Le destructuring type est une features peut connu et peut utilisée. Mais une fois qu’on l’a testé, on peut plus s’en passé.

Vous avez déjà rencontré une répétitivité lors de la définition des variables dans votre code.
Le destructuring permet d’aller plus loin et de s’affranchir de la syntaxe traditionnel:

// un tableau 
let arr = [2017, 7, 1],
year = arr[0],
month = arr[1],
day = arr[2]; 

// un objet 
let aDate = { year: 2017, month: 7, day: 1 },
year = aDate.year,
month = aDate.month,
day = aDate.day;

Avec le destructuring on retrouve quelque chose comme ceci:

// un tableau
let [year, month, day] = [2017, 7, 1];
// un objet
let {year, month, day} = {year: 2017, month: 7, day: 1};

Pratique non?? Aller on vas encore plus loin…

Les nested Destructuring

Regardez donc ceci de plus près:

let response = {
  status: 200,
  result: {
      author: "J.K. Rowling",
      title: "Harry Potter and the Chamber of Secrets",
      price: 11.99
  }
};
let {status, result: { price }} = response;

Ce type de destructuring est très pratique pour récupérer les informations d’une requête http ou de gros objet. Il faut juste se rappeler que lorsque vous utilisez des nested destructuring, vous n’avez pas le droit d’omettre une déclaration. Si une valeur est NULL où undefined vous allez lever une erreur. Alors utilisez ceci si vous avez un doute:

let {status, result: { price } = {}} = response;

Cela défini un objet vide par défaut et évitera ainsi de lever une erreur
Voila, cette petit introduction du Javascript destructuring est terminée. Pour ceux qui en veulent plus, je vous conseil un quelques lectures:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition

http://exploringjs.com/es6/ch_destructuring.html

http://wesbos.com/destructuring-objects/

Vous retrouverez tous les autres articles traitant du même sujet dans la section Programmation

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.