Ces nouvelles fonctionnalités que vous devriez utiliser en JavaScript ES6 !

Comme la communauté JavaScript a continué à se développer rapidement ces dernières années, beaucoup de bonnes choses sont arrivées à JavaScript en tant que langage. Une de ces bonnes choses était sa pénétration dans le monde du développement côté serveur via Node.js C’est donc une pléthore de nouvelles fonctionnalités qui nous arrive en ES6 !

La liste est très biaisée et subjective. Il n’est en aucun cas destiné à diminuer l’utilité des autres fonctionnalités de l’ES6, qui n’ont pas atteint la liste simplement parce que je me suis limité à 3 

Paramètres par défaut dans ES6

Avant l’arrivée de ES2015, quand on voulait spécifier un paramètre par défaut dans une fonction, il fallait le faire dans le corps de la fonction comme ça :

function greetHuman(name) {     name = name || 'human';     return 'Hello ' + name + ', we come in peace'; }  greetHuman();  greetHuman('Siddhy');

Tout était OK jusqu’à ce que la valeur soit 0, parce que 0 est false en JavaScript et il serait par défaut égal à la valeur codée en dur au lieu de devenir la valeur elle-même. Bien sûr, qui a besoin de 0 comme valeur (:P), donc nous avons juste ignoré cette faille et utilisé la logique OU pour ça!

Avec ES6, on peut maintenant le faire dans la signature de fonction et en tant que tel, nous n’avons plus à effectuer de contrôles pour des paramètres indéfinis dans le corps de la fonction.

Voici à quoi ressemblerait le code de l’ES6 si vous combiniez les fonctions fléchées, le modèle littéral et paramètres par défaut :

const greetHuman = (name = 'human') => `Hello ${name}, we come in peace`;  greetHuman('Siddhy'); 'Hello Siddhy, we come in peace'  greetHuman(); 'Hello human, we come in peace'

Les fonctions fléchées en ES6

J’ai déjà fait tout un article sur les fonctions fléchées en ES6 mais j’en profite pour en remettre une couche !

Si vous êtes un développeur JavaScript, vous connaissez déjà la bonne vieille façon de déclarer les fonctions.

C’est probablement l’une des caractéristiques que j’attendais le plus. Nous les avons maintenant en ES6. Les flèches sont étonnantes parce qu’elles font en sorte que votre this se comporte correctement, c’est-à-dire qu’il aura la même valeur que dans le contexte de la fonction – il ne subira pas de mutation. La mutation se produit généralement chaque fois que vous créez une closure.

L’utilisation des fonctions fléchées dans ES6 nous permet d’arrêter d’utiliser that = this ou self = ceci ou _this = this ou .bind(this).

En bon vieux code ES5 ça pourrait donner quelque chose comme:

var _this = this  $('.btn').click(function(event){   _this.send() }) 

Et en ES6, sans le _this = this :

$('.btn').click((event) =>{   this.send() })

Comme vous pouvez le voir, le code semble plus court et plus propre – nous pouvons même omettre les accolades {} (une seule ligne seulement). Il y a aussi un support pour le retour implicite, de sorte que nous pouvons facilement omettre le mot-clé de retour.

les template strings (ou Littéraux de gabarits) en ES6

Les littéraux de gabarit (ou gabarits de chaîne de caractères) est un moyen de sortir des variables dans la chaîne de caractères. Ceci reste l’une des caractéristiques les plus importantes car elle rend vraiment la concaténation des chaînes plus facile et beaucoup plus compréhesible.

Les gabarits sont délimités par des caractères accentgrave (` `)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (placeholders). Ces espaces sont indiqués par le signe dollar ($) et des accolades (${expression}). Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.

Définition du MDN

Donc en ES5, nous devions casser la chaine comme ça :

var name = 'Your name is ' + first + ' ' + last + '.'; var url = 'http://localhost/api/' + id;

Heureusement, dans ES6 nous pouvons utiliser une nouvelle syntaxe ${NOM} à l’intérieur de la chaîne :

let name = `Your name is ${first} ${last}.`; let url = `http://localhost/api/${id}`;

Conclusion

De multiples améliorations ont eu lieu avec la venue d’ECMAScript6 et celles que j’ai listées sont pour moi les plus importantes. J’essaierai peut être de compléter cet article avec d’autres fonctionnalités ES6 importantes dans l’avenir mais si vous avez des préférences n’hésitez pas à me le faire partager en commentaire  En attendant vous pouvez toujours aller voir mon article sur les objets Set et Map en ES6