ES6 : les principales features à connaître

ES6 ou ECMA Script 6 est un ensemble de normes ou standards de programmation. La version 6 de ce standard est sortie en 2015.

Les constantes

Il n’était possible de définir une constante avec ES5, qu’en passant par la création d’objets. Il fallait donc créer une propriété d’un objet et spécifier que cette propriété n’était ni writable ni configurable

Avec ES6 il suffit d’écrire :

const OMEGA = 0.5671432904
if(OMEGA > 12){
  // do stuff
}

Il peut être intéressant d’utiliser les constantes au lieu de var afin de signaler qu’il n’y aura pas de réassignement.

Les variables block-scoped

La notion de scope est très importante en JS.

Une variable peut avoir une portée :

• Globale
• Locale

Une variable globale est modifiable dans l’ensemble du programme, elle est définie en dehors de toute fonction. Une variable locale quant à elle n’existe que dans le cadre de l’exécution de la fonction. Elle est créée lors de l’exécution de la fonction. Elle est ensuite détruite à la fin de l’exécution.

ES6 apporte une nouveauté intéressante en créant des variables dont la portée est limitée à un bloc :

var i
if (PI>5) {
  let gamma = 20*3;
  i = gamma * gamma;
}

Ici :

• i est une variable ayant un scope globale
• gamma est une variable ayant un scope de bloc

Le Hoisting

Je fais un micro-passage ici par la notion de Hoisting en Javascript. Car cette notion est intéressante.

La règle est qu’on peut se servir d’une variable et la déclarer a posteriori dans le code..

b= 32;

c= b+1;

var b;
var c;

Ce code est fonctionnel. Car le moteur va passer en revue le code une première fois pour procéder aux déclarations. En revanche si on utilise le mode strict on ne peut utiliser ce genre de chose !

Les Arrow Functions ou fonctions fléchées

On connait trop bien la manière de déclarer des fonctions anonymes. Cette méthode de déclaration est assez longue :

Voici l’ancienne méthode :

odds  = evens.map(function (v) { return v + 1; });

La nouvelle version ES6

odds  = evens.map(v => v + 1);
// OU encore
(a,b) => a+b
// équivalent à
(a,b) => {
  return a+b;
}
// on peut aussi des fonctions sans paramètres de cette manière
() => { instructions }
_  => { instructions }

Les templates et les chaînes de caractères

let amount = "150 $"
let due_date = "15th April"

let sentence = "You owe me ${amount} , the due date is ${due_date}"

Les paramètres par défaut

Alors qu’il fallait utiliser des techniques un peu moches pour déterminer si un paramètre était renseigné :

// Réassignation de x
// il vaut 0 si x n'est pas un nombre...
var x = typeof(x) === "number" ? x : 0;

On peut maintenant définir les paramètres ainsi :

let addition = function (a=0,b=0){
  return a+b;
}

Boucles for of (foreach)

Houra voilà le foreach en JS :

let students = ["Joe","Donald"];
for (let student of students){
  console.log(student);
}

Les strings multi-lignes

On peut maintenant déclarer une chaîne sur plusieurs lignes grâce au symbole backtish :

var vh = `Mon père, ce héros au sourire si doux,
Suivi d'un seul housard qu'il aimait entre tous
Pour sa grande bravoure et pour sa haute taille,
Parcourait à cheval, le soir d'une bataille,`

Les assignements déstructurés

Avec ES5 on doit faire :

var body = req.body,
  username = body.username,
  password = body.password

Avec ES6 on fera :

var {username, password} = req.body

Les promesses

L’utilisation est désormais native.

Les classes

Le grand changement est l’introduction des classes :

Déclaration

class Human {

  constructor(sex,age){

    this.sex=sex;
    this.age=age;

  }

  speak(string){

  }
}

Héritage

On peut faire hériter une classe d’une autre classe via le mot clé extends.

class Teacher extends Human {
    constructor (sex, age, speciality) {
        super(sex,age)
        this.speciality  = speciality
    }
}
class Student extends Human {
    constructor (sex, age, major) {
        super(sex,age)
        this.major  = major
    }
}

Accès aux méthodes de la classe de base

Pour accéder aux méthodes et propriétés définies dans la classe de base on utilise super.

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        …
    }
    toString () {
        return "Rectangle > " + super.toString()
    }
}
// source : http://es6-features.org/#BaseClassAccess

super.toString() appelle la méthode toString() définie dans la classe Shape.

Getters et Setters

class Student extends Human {
    constructor (sex, age, major) {
        super(sex,age)
        this.major  = major
    }

    get major(){
      return this.major
    }
}

var paul = new Student("Male",20,"CS");
if(paul.major=="CS"){

}

Modularisation: la syntaxe export et import

Dans un module on peut utiliser la syntaxe export:

export var standard_price = 10

export function get_other_prices (){
  //...
}

Puis dans le fichier principal on peut importer variables et méthodes :

import {standard_price,get_other_prices} from 'module'

On peut aussi tout importer :

import * as my_module from 'module'
console.log(my_module.standard_price);

Comment utiliser ES6.

• N’étant pas supporté encore par tous les navigateurs il faudra utiliser un compilateur comme Babel qui se chargera de traduire votre code avec une syntaxe supportée.
• Avec NodeJS les principales features sont supportées par les nouvelles versions.