Commencer avec la nouvelle version du JavaScript ES6

Introduction

Jusqu’au présent, vous avez toujours réalisé et développé vos applications coté navigateur avec le langage JavaScript et plus précisément la version JavaScript appelé ECMAScript5. ECMAScript est une norme évolutif des langages de script que nous n’avons pas le temps d’en parler aujourd’hui, mais vous pouvez trouver plus de détail Ici.

Vous avez probablement entendu parler de cette chose appelé ECMAScript6, ES6, ES2015 ou JavaScript ES6. En fait, ES6 est la nouvelle spécification du langage JavaScript, standardisée en 2015. ES6 a été pensée pour créer des applications web facilement maintenables, tout en restant compatibles avec le code existant. L’idée a été d’ajouter de nouvelles fonctionnalités au langage. Ainsi, la bibliothèque standard s’enrichit de nouvelles méthodes, mais surtout, le langage adopte de nouvelles syntaxes permettant d’avoir du code beaucoup plus structuré et lisible.

Compatibilité

ES6 commence à apparaitre dans tous les navigateurs modernes en se servant de la technologie Node.JS mais, si vous rencontrer des problèmes d’utilisation, c’est-à-dire que votre navigateur ne supporte pas encore la nouvelle version ES6 ne vous inquiétez surtout pas, vous pouvez vous servira de deux solution parmi les solutions existantes :

• Babel REPL : Une plateforme interactive qui permet de convertir facilement du code ES6 en ES5, il n’y a rien à installer avec cette solution.

A droite c’est du code ES6 et à gauche c’est du code ES6 transformé automatiquement à la
version ES5.

• Traceur de Google : un outil mis en place par Google dont le but est de compiler JavaScript ES6 en ES5
  Il suffit d’intégrer ce bout de code à la tête de vos pages web :
  <script src=”https://google.github.io/traceur-compiler/bin/traceur.js”></script>
  <script src=”https://google.github.io/traceur-compiler/src/bootstrap.js”></script>Un article ne suffira pas pour parler de JavaScript ES6 d’une manière détaillée, mais nous allons essayer de citer les nouveautés qui sont facile à adopter.

Du mot clé var au mot clé let

ES6 a une nouvelle façon pour déclarer les variables :

– let : le mot clé let permet de déclarer une variable avec une portée limiter à un bloc Le
mot clé let permet de déclarer une variable limitée à la portée d’un bloc, c’est-à-dire
qu’elle ne peut être utilisée que dans le bloc où elle a été déclarée, ce qui n’est pas le
cas avec var.

De la concaténation au littéraux de chaînes (Template literals)

Avec la version ES5, nous avons utilisé le concept de la concaténation pour concaténer deux
fragments de chaines de caractères ou bien pour insérer ou concaténer une valeur stocké dans une variable avec une chaine de caractère, tout en se servant de l’opérateur ‘ + ’ ce qui n’est pas forcément pratique et lisible, c’est pour cela la version ES6 introduit une nouvelle forme de syntaxe pour les littéraux de chaînes, appelé gabarits de chaînes (Template strings). Ceux-ci ressemblent à des chaines de caractères ordinaires délimités cette fois-ci par des anti-quottes (backtick) ‘ ` ’ au lieu des double quottes habituelles :

Les gabarits de chaînes de caractères font entrer l’interpolation de chaînes de caractères dans JavaScript. Autrement dit, ils représentent une façon élégante et agréable pour insérer des valeurs stockées dans des variables JavaScript au sein d’une chaîne de caractères.

Dans l’exemple ci-dessus,  ${nom} et ${age} sont appelés des substitutions de gabarits, le moteur JavaScript ES6 va insérer les valeurs des variables nom et age dans la chaine résultante. Avec ce concept le plus élégant, on peut utiliser n’importe quel type de donnée, si par exemple la variable age était un objet alors c’est sa méthode toString() qui sera invoquée. Template literals permet aussi de bien présenter les chaines de caractères multi-lignes.

Exemple: voilà ce que nous obtenons avec la version ES5 :

Avec la version ES6, il suffit d’échapper le caractère de retour à la ligne avec un antislash sans utiliser la concaténation (mais il faut ajouter les retours à la ligne explicites au début).

De Function Expression à Arrow Function (fonctions fléchées).

Les fonctions fléchées sont particulièrement utiles pour les rappels courts qui ne donnent que
des résultats d’expressions.
Avec ES5, ce type de rappels courts est un peu verbeux :

Avec la version ES6, l’écriture est plus élégante et plus light ! :

Notes :
– Vous pouvez même omettre les parenthèse si la fonction fléchées ne possède qu’un
seul paramètre : (x) => x*2 devient x => x*2.
– La méthode map() permet de créer un nouveau tableau composé des images des
éléments du tableau courant par une fonction donnée en argument.

Manipulation de plusieurs valeurs d’un tableau :

Si nous voudrions par exemple appliquer la méthode split() qui permet de diviser une chaine de caractères à partir d’un séparateur pour fournir un tableau de sous-chaines de caractères et stocker chaque élément du tableau dans une variable, voilà comment faire ça avec JavaScript ES5.

Avec JavaScript ES6, l’écriture est toujours élégante :

L’emplacement vide au début permet de sauter le premier élément du tableau, on peut utiliser
cette notion pour sauter n’importe quel élément du tableau.

De for à for-of

L’itération sur un tableau avec la version ES5 s’effectue comme suit :

Avec ES6, la structure itérative for-of prend la forme celle-ci :

L’inconvénient de cette solution c’est qu’il ne permet pas de récupérer l’index de chaque élément du tableau mais, ne vous inquiétez pas, ES6 à bien penser à ça en fournissant une méthode entries() qui retourne l’index et la valeur du tableau :

Fonction avec paramètres par défaut

Terminons cet article avec une nouveauté géniale. Prenons un cas classique avec l’écriture d’une fonction qui doit additionner deux nombres. Si les paramètres ne sont pas définis alors votre programme plante, pour éviter cela il faut soit être sûr que les paramètres sont bien utilisés ou alors les tester dans le code, ce qui revient à faire quelque chose comme ça :

La version JavaScript ES6 permet de définir une fonction avec des paramètres par défaut si on les définies par lors de l’appel de la fonction :