Renommer les Variables déstructurée ES6

Nous avons déjà vu ce que sont les variables déstructurées en Javascript avec un article précédent traitant du Destructuring avec ES6. Je vais vous montrer ici comment aller plus loin avec cette technique en vous donnant une nouvelle astuces utiles. Le destructuring est très pratique, mais parfois, le nom des variables retournées n’est pas suffisamment explicite pour permettre une compréhension et une relecture du code aisé. C’est à ce moment qu’il devient utiles de pouvoir les renommées comme bon nous semble.

Comment renommer les variables?

Je vais vous montrer avec un petit bout de code comment renommer à la volée le nom de variable déstructurée. Ainsi il sera plus facile de vous rendre compte et de comprendre.

Regardez ce bout de code… le but est de récupérer le « firstname » du prof et celui de l’élève… problème, les variables portent le même nom.

const data = {
  teacher: {
    firstname: 'Nico',
    lastname: 'Fazio'
  },
  student: {
    firstname: 'Jean',
    lastname: 'Roulin'   
  }
};

// extracting
const {
  teacher,
  student,
} = data;

console.log(teacher.firstName, student.firstName)

Mais si on renomme les variables, là plus de problèmes!! Demo:

const data = {
  teacher: {
    firstname: 'Nico',
    lastname: 'Fazio'
  },
  student: {
    firstname: 'Jean',
    lastname: 'Roulin'   
  }
}

// extracting and rename
const {
  teacher: {fistname: t_firstName},
  student: {fistname: s_firstName},
} = data;

console.log(t_firstName, s_firstName)

Pratique non?? Aller j’ai encore une astuce pour vous!
Vous pouvez aussi assigner des valeurs par défaut avec cette syntaxe.

Assigner des valeurs par défaut avec le destructuring

const data = {
  teacher: {
    firstname: 'Nico',
    lastname: 'Fazio'
  },
  student: {
    firstname: 'Jean',
    lastname: 'Roulin'   
  }
}

// extracting and rename
const {
  teacher: {fistname: t_firstName = 'Prof'},
  student: {fistname: s_firstName = 'Élève'},
} = data;

console.log(t_firstName, s_firstName)

On remarque que le renomme le prénom du prof en « t_firstName » et le prénom de l’élève en « s_firstName« . Terrible non?

Voilà. un article court mais qui vous permettra de donner plus de lisibilité à votre code. 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.

Demande ta version numérique gratuite de mon livre Javascript Array Methods