JavaScript ES6 dispose de nombreuses nouveautés fort utiles par rapport à Common JS (ES5). Ceci est le premier article d'une série sur ces nouveautés et avantages.
Même si aujourd'hui la majorité du parc navigateurs est compatible, il reste conseillé de convertir notre code en ES5 en utilisant un transpiler pour qu'il soit compris par tous les navigateurs. Un transpiler est un type de compilateur qui prend le code source d'un langage de programmation et le convertit en un autre langage ou version. Le transpiler le plus utilisé pour ES6 est Babel, que l'on incorpore généralement dans notre process de bundling avec Webpack par exemple.
Pour commencer avec ces nouveautés, je vais aborder ici l'affectation par décomposition et les littéraux de gabarits (template literals).
L'affectation par décomposition (destructuring)
La décomposition est un moyen pratique d'extraire plusieurs valeurs d'un objet ou de tableaux (éventuellement imbriqués). Il peut être utilisé dans des emplacements recevant des données (comme le côté gauche d'une affectation).
Regardons concrètement ce que cela donne par l'exemple :
Imaginons un tableau comme celui-ci :
const names = ['Yann','Eric','Juliette'];
Pour obtenir chaque nom dans une variable distincte, nous pouvons faire quelque chose comme ceci :
let person1 = names[0];
let person2 = names[1];
let person3 = names[2];
Grâce à la décomposition, notre tâche est facilitée est la même chose pourra être réalisée comme cela :
const [person1, person2, person3] = names;
Ceci va stocker chaque valeur du tableau names dans chacune des variables spécifiées entre crochets.
Notons que les noms de nos variables (person1, person2 et person3) sont dans le même ordre que les valeurs du tableau.
La même chose s'applique aux objets. Imaginons un objet comme celui-ci :
const obj = {
name: 'Yann',
age: 40
};
La décomposition de cet objet pourra être faite comme ceci :
const {name, age} = obj;
Cela va stocker la valeur donnée à la propriété name de l'objet dans la variable name et de même pour l'age.
Pour en savoir plus sur la décomposition, je vous invite à regarder la documentation correspondante.
Les littéraux de gabarits (template literals)
Tel que définis par Mozilla, les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multilignes et des fonctionnalités d'interpolation.
Pour simplifier, ce sont des chaînes de caractères pouvant être sur plusieurs lignes et inclure des expressions d'interpolations (insérées via ${...}) telles que des variables.
const firstName = 'Yann';
console.log(`Bonjour ${firstName} !
Comment allez-vous
aujourd'hui ?`);
// Sortie dans la console:
// Bonjour Yann !
// Comment allez-vous
// aujourd'hui ?
Jusqu'à présent, lorsque vous vouliez utiliser des variables dans une chaîne, vous deviez utiliser la concaténation et ne pouviez faire cette chaîne sur plusieurs lignes dans votre code comme ceci :
let name = 'Yann';
let age = 40;
console.log('Bonjour, je suis ' + name + ' et j\'ai' + age + ' ans.');
Cette chaîne de caractères est assez déroutante à lire. Pour améliorer cela, ES6 a donc introduit les littéraux de gabarits. Nous pouvons ainsi utiliser les backticks (``) plutôt que des guillemets. Les variables sont ensuite incorporées à l'aide de ${}, le nom de la variable étant placé entre accolades. L'expression peut également être multilignes sans utiliser \n comme ceci :
let name = 'Yann';
let age = 40;
console.log(`Bonjour, je m'appelle ${name} et j'ai ${age} ans.`);
Notez que les retours à la ligne sont normalisés dans les littéraux de gabarits et sont toujours LF (\n).
Pour en savoir plus, reportez-vous à la documentation.
2