Destructuring Objects

 
Dans la vidéo précédente, on a vu comment destructurer des arrays pour créer des variables.
On peut faire la même chose en destructurant des objets !

const myObject = {
  name: "John",
  age: 32
};

const {name, age} = myObject;

console.log(name); // John
console.log(age); // 32

Il y a tout de même une grosse différence avec le destructuring d’arrays.

Dans les arrays, il y a un ordre mais pas dans les objets. Donc on pouvait créer des variables basés sur l’ordre du array.

Pour les objets, on peut créer des variables mais en se basant uniquement sur le nom des propriétés de l’objet initial.

Si on crée des variables qui n’ont pas le même nom que les propriétés de l’objet, ça ne fonctionnera pas.

const myObject = {
  name: "John",
  age: 32
};

const {name1, age1} = myObject;

console.log(name1); // undefined
console.log(age1); // undefined

Le code ci-dessus affichera undefined car les propriétés name1 et age1 n’existe pas sur myObject.

Pour créer des variables qui ont des noms différents des propriétés de l’objet initial, on pourra utiliser les alias

const myObject = {
  name: "John",
  age: 32
};

const {name:name1, age:age1} = myObject;

console.log(name1); // John
console.log(age1); // 32

On a maintenant créé les variables name1 et age1 qui sont basées sur les propriétés name et age de myObject

On peut également utiliser le destructuring pour créer des fonctions

const myObject = {
  name: "John",
  age: 32,
  present: function() {
    console.log("Hello");
  }
};

const {name, present} = myObject;

present(); // Hello