Tout savoir sur la norme ES6 de JavaScript

Posted on:13 avril 2017 at 02:00

ES6 (pour ECMAScript Edition 6) est une des dernières versions de la norme JavaScript (la plus récente étant ES7, mais apporte peu d’ajout), plus communément connu sous le nom de ES2015. Cette version modifie grandement la façon d’aborder le JavaScript. Plus proche d’un langage comme le C# ou encore Swift avec et surtout, le support de la programmation orienté objet (POO) et enfin plus de contrôle sur ses différents types de variable.

Pour information, ECMA-262 est le nom du standard concernant le JavaScript, gérer par l’association Ecma International.

Histoire

La première édition de JavaScript à vu le jour en Juin 1997, ça ne rajeuni pas du tout, et encore fallait-il être né ! Une nouvelle édition sort en Décembre 1999 et depuis, malgrès une version en 2009 pour corriger quelques problèmes de comprhension, le langage n’a que très peux évoluer, voir pas du tout. Mais l’arriver de NodeJS, TypeScript et bien d’autres on grandemment changer la façon d’utiliser le Javascript.

À l’origine présent pour dynamiser un peu les sites internet sur leur aspect visuel. Le langage a petit à petit évolué pour être utilisé afin de gérer de la ”logique” dans le code, puis au niveau même du serveur avec NodeJs. Typescript a aussi mis au goût du jour certains concepts comme la programmation Orienté Objet (POO), le typage des variables, énumération dans le JavaScript. ES6 et ES7 sont donc des condensés de ses nouvelles façons d’utiliser le langage, plus moderne, plus flexible et surtout plus lisible et logique.

Pour les plus curieux, ESnext sera la prochaine monture de Javascript avec le support de async/await pour la mise en place d’opération asynchrone, très semblable à la façon de faire du C#. Sans parler de : opérateur de binding, décorateurs, SIMD, Observable, etc . Bref vous l’aurez compris, JavaScript n’en a pas finit d’évoluer !

Du code ! Du code !

Oui, je vous entends rugir au loin, le blabla c’est sympa, mais le code c’est mieux non ? Et bien allons-y ! Nous allons donc voir, à travers cette liste les nouvelles fonctionnalités et façon de faire avec la norme ES6 de JavaScript. Vous allez vous dire : ”C’est très sympa un nouveau standard mais c’est un langage de script, donc si un navigateur le supporte par ou n’est pas à jour, ça marche pas si ?” et je vous répondrai “Oui, vous avez raison”. Et je rajouterais même malheureusement … Comme souvent, et comme cela a été le cas pour HTML5 et CSS3 il faut un temps d’adaptation pour les navigateurs (hors internet explorer qui n’est plus mis à jour). Mais bonne nouvelle, la norme ES6 étant sortie en 2015, celui-ci est quasiment pleinement supporté. Même si cela est un peu moins vrai pour les spécificités ES7.

Voilà un tableau des compatibilités pour ES6, cependant il existe aussi une alternative pour convertir votre code ES7-ES6 en ancienne version qui fonctionne à peu près partout, et cette solution je la nomme Babel. En cliquant sur Try and out l’outil va convertir automatiquement votre code en ancienne syntaxe. Cela vous permettra de vous faire une idée du nombre de lignes que l’on peu gagné avec ES6 !

Bien, maintenant attaquons, différents points assez généraux vont être abordés, toutes les possibilités ne seront bien entendues pas exposé ici, pour des utilisations précises je vous invite à vous référer à MDN.

Quand ‘var’ devient ‘let’

Vous connaissez tous var, en même temps vous n’aviez pas vraiment trop le choix à l’époque pour déclarer une variable ! Cependant, il arrivait régulièrement qu’à cause de var le code ne se comporte pas comme souhaité, ou alors ne provoque pas d’erreur alors qu’il devrait en avoir une. Pourquoi donc ? Simplement car var est global, c’est-à-dire que la variable est accessible partout, n’importe ou et n’importe quand. Deux variables du même nom dans un même code étaient problématiques.

Et bien cela est maintenant révolu, il va falloir réduire considérablement votre utilisation de ce type, mais privilégier let. Vous pourrez y mettre la même chose, que ce soit un tableau, un chiffre ou une chaîne de caractères. La seule différence est que, comme dans un langage bas niveau tel que le C par exemple, cette variable à une durée de vie, qui correspond à son bloc. Par exemple :

// var b; // Sera automatiquement créé en haut du fichier automatiquement

if(true === true)
{
    let a = 0;
    var b = 2;
            console.log(a); // Affiche '0'
}

console.log(a); // undefined, car la variable a existe seulement dans le bloc de la condition
console.log(b); // Affiche

Le type Const

Le type const, comme son nom l’indique permet de définir une variable constante. Celle-ci a les mêmes propriétés qu’une variable let sauf à une exception près, il est impossible de la modifier, car comme son nom l’indique elle est constante. Il peut être pratique à utiliser pour définir PI par exemple. Utiliser le dès que vous le pouvez. Car en fonction des navigateurs et de la façon donc se type et gérer il peut y avoir un petit gain de performance. Très minime je l’accorde, mais les bonnes pratiques sont toujours bonnes à prendre !

Les fonctions fléchées

Petite modification au niveau de la syntaxe par rapport à l’avant ES6. Pour les utilisateurs de CoffeeScript vous n’allez pas être trop perdu.

// Avant
var variableLocal = [1, 2, 4, 3];
variableLocal.forEach(function (variable) {
    console.log(variable);
});

// ES6 et ES7
// Méthode 1
let variableLocal = [1, 2, 4, 3];
variableLocal.forEach((variable) => {
    console.log(variable);
});

// Méthode 2
let variableLocal = [1, 2, 4, 3];
variableLocal.forEach(variable => {
    console.log(variable);
});

// Méthode 3
let variableLocal = [1, 2, 4, 3];
variableLocal.forEach(variable => console.log(variable));

Comme vous pouvez le voir ici, il y a plusieurs possibilités avec ES6. (e) => remplace donc function(e) { }. La première méthode permet de passer plusieurs paramètres (e, r, t) => dans la fonction. Sur la deuxième méthode, on peut voir que les parenthèses ne sont absolument pas obligatoires s’il n’y a qu’un seul paramètre et enfin, la dernière et troisième méthode montre la syntaxe la plus légère possible, pour une seule instruction les parenthèses ne sont pas obligatoires et le console.log est appelé directement avec la flèche, pas besoin des accolades.

Autre détail qui a son importance, avec l’utilisation d’une fonction fléchée le this fait directement référence au contexte parent. Ce qui permet d’éviter dans certains cas une gymnastique intellectuelle.

Le backtick, la nouvelle guillemet

Qui n’a jamais rêvé d’en finir avec une multitude de + dans son code ? Ou de faire du mutli-ligne sans devoir fermer le guillemet et la rouvrir ? Et bien maintenant c’est possible ! Le backtick fait maintenant son apparition en plus des guillemets simples et doubles. Son utilisation première est la suivante :

// Avant
var number = 5;
console.log("Bonjour ! J'ai " + number + " amis");

// ES6 et ES7
let number = 5; // On oublie pas l'utilisation de let
console.log(`Bonjour ! J'ai ${number} amis`);

Et c’est magique ! Fonctionnalité très pratique, que je vous conseille de garder sous le coude, surtout lorsque votre chaîne comporte beaucoup de variable à intégré. Et en bonus, un retour à la ligne intégrera automatiquement un \n comme dans l’exemple ci-dessous.

// Avant
var number = 5; // On oublie pas l'utilisation de let
console.log("Bonjour ! J'ai " + number + "\n  amis");

// ES6 et ES7
let number = 5; // On oublie pas l'utilisation de let
console.log(`Bonjour ! J'ai ${number}
    amis`);

Spread operator

Permets de convertir les paramètres d’une fonction par exemple en un tableau.

function showElements(...elements){
    console.log(elements);
}
showElements("Banane", "Licorne", "Patate")

Le code précédent retourne donc le résultat suivant sous forme d’un tableau Array [ "Banane", "Licorne", "Patate"].

Un paramètre par défaut

Nouvelle fonctionnalité bien appréciable, ES6 permet l’ajout d’un paramètre par défaut beaucoup plus simplement qu’avant. Voilà un même code avant et après (maintenant) avec l’utilisation du nouveau standard.

// Avant
function show() {
    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
    console.log(val);
}
show(); // Affiche '100'
    show(0) // Affiche '0'

// Maintenant
function show(val = 100){
    console.log(val);
}
show() // Affiche '100'
    show(0) // Affiche '0'

La programmation orienté objet (POO)

Enfin ! Je suis très adeptes de la POO à mes heures perdues, Typescript me proposé à l’époque une alternative mais la voir arriver “nativement” me fais très plaisir. Donc oui, il est donc maintenant possible de faire de la programmation orienté objet en JavaScript sans extensions supplémentaires ! Les plus puristes me diront qu’il y avait moyen de le faire à l’époque et je confirme. Mais ceci n’était pas très lisible ni très pratique. Maintenant rien de plus simple avec le mot-clef class. Voilà un exemple qui va réunir plusieurs notions vues précédemment.

class Character {
        constructor(name, life = 100, ...skills) {
                // Ajout des variables
                this.name = name;
                this.life = life;
                this.skills = skills
        }

        getName() {
                return this.name; // Retourne la variable
        }

        getSkills() {
                return this.skills; // Retourne la variable
        }
}

// Héritage
class Warrior extends Character {
        constructor(name, defense, life = 100, ...skills) {
                super(name, life, skills);
                this.defense = defense;
        }

        getDefense() {
                return this.defense;
        }
}

let a = new Character("Bill Gates", 100, "Programmation", "MSDOS");
console.log(a.getName());
console.log(a.getSkills());

let b = new Warrior("Satya Nadella", 50);
console.log(`${b.getName()} possède ${b.getDefense()} de défense.`);

Comme vous pouvez le voir, l’héritage est aussi de la partie.

Polyfill

En programmation web, un polyfill est un ensemble de fonctions, le plus souvent écrites en JavaScript ou en Flash, permettant de simuler sur un navigateur web ancien des fonctionnalités qui ne sont pas nativement disponibles. Par exemple, accéder à des fonctions HTML5 sur des navigateurs ne proposant pas ces fonctionnalités.

Vous avez tout dans la définition de Wikipédia ! Certaines fonctionnalités peuvent être supportées sur les navigateurs anciens par l’intermédiaire de Polyfill. Mais si vous souhaitez une compatibilité à 100% convertir votre code via Babel reste la meilleure solution. Même si de nos jours, en 2017, la plupart des navigateurs le supportent déjà. Vous trouverez des Polyfill sur MDN sur la page de certaines fonctionnalités. C’est un simple code JavaScript à introduire dans votre code. Voir cet exemple.

Nous avons donc vu dans cet article les gros changements, ceux que vous utiliserez le plus souvent. Il en existe bien d’autres pour des tâches plus spécifiques. Je vous laisse vous référer à MDN pour ça. Si vous avez des questions n’hésiter surtout pas de laisser un commentaire !