Les nouveautés d’ECMAScript 6

ECMAScript est un langage de type script standardisé par Ecma International, implémenté dans JavaScript.

ECMAScript 6 (ES6) est en cours de validation et devrait être finalisé durant l’année 2015.

Voyons tout de suite quelques nouveautés apportées par ECMAScript 6.

Arguments par défaut

Avec ES6, il est maintenant possible de donner une valeur par défaut aux arguments d’une fonction.


function myFunc(foo = “bar” ) {
    // ...
}

Les classes

ES6 apporte une nouvelle façon de définir des classes qui va ravir les développeurs habitués aux langages objets avec classes comme Java.


class Animal { // mot-clé class
    constructor(name) { // mot-clé constructor
        this.name = name;
    }
}

class Cat extends Animal { // héritage avec le mot-clé extends
    constructor (name="garfield") {
        super(name); // appelle le constructeur de la classe mère
    }
    miaow () { // plus de mot-clé function
        console.log(this.name + ": mew!");
    }
}

felix = new Cat('Felix');
felix.miaow();

Import / exporte avec les modules

ES6 implémente un système de module à même titre que Node.js.

Cat.js :

class Cat extends Animal {
    //...
}

export default Cat;

main.js :

Import Cat from './Cat' // pas d'extension .js

felix = new Cat('Felix');
felix.miaow();

Variables locales

ES6 introduit un nouveau mot-clé let, pour définir une variable locale à un bloc.


function myFunc() {
    let x = 10;
    for (let i = 0; i < 10; i++) {
        console.log(i); // 1, 2, 3, 4 ... 9
    }
    console.log(i); // is not defined
}
console.log(x); // x is not defined

Les strings

ES6 introduit la construction de chaîne de caractères avec interpolation via le caractère ` (back-tick), ce qui évite d'utiliser la concaténation :


let name = "Néo";

console.log(`Hello ${name}`); // Hello Néo

On peut aussi construire des chaînes sur plusieurs lignes :


let firstName = "Martin", lastName = "Dupon";
console.log(`
    Hello I'm
    ${firstName}
    ${lastName}
`
);
/*
    Hello I'm
    Martin
    Dupon
 */

Arrow function

Avec ES6, on peut maintenant définir des fonctions avec une double flèche ('=>') :


/* Avant */
var sayHello = function(name) { return "hello " + name; }

/* Après */
var sayHello = (name) => "hello " + name;
/* or var sayHello = (name) => { return "hello " + name; } */

sayHello("Bob");

Cela marche aussi avec les paramètres rest (tableau représentant un nombre indéfini d'arguments) :


/* REST parameters */
var sayHello = (...people) => people.forEach(
    (somebody) => console.log("Hello", somebody)
);

sayHello("Bob", "Jean", "Michou");

Promises

Les promises permettent de gérer des actions asynchrones et de leur associer des gestionnaires d'erreur. Pour les utiliser, il fallait utiliser la librairie Q, avec ES6, elles sont implémentées en native :


let promise = new Promise((resolve, reject) => {
        /* Make an async call */

        if(/* everything is fine now */) {
            resolve("Yehee");
        }else{
            reject("Too bad");
        }
    });


/* In a theorical way */
promise.
    then((result) => {
        console.log(result);
    }).
    catch((err) => {
        console.log(err);
    });

Maps

Avec ES6, il est maintenant possible de faire des tableaux associatifs (ou map) c'est-à-dire des tableaux clé / valeur :


let map = new Map();

map.set("one",{firstName:"Bob", lastName:"Dupon"});
map.set("two",{firstName:"Jean", lastName:"Michou"});

console.log(map.has("one")); // true
console.log(map.get("one")); // Object {firstName: "Bob", lastName: "Dupon"}
console.log(map.size); // 2

for (let key of map.keys()) {
    console.log("Key: %s", key);
}
/* Key: one, Key: two */

for (let value of map.values()) {
    console.log("Value: %s %s", value.firstName, value.lastName);
}
/* Value: Bob Dupon, Value: Jean Michou */

for (let item of map) {
    console.log("Key: %s, Value: %s", item[0], item[1].firstName, item[1].lastName);
}
/* Key: one, Value: Bob Dupon, Key: two, Value: Jean Michou */ 

myOtherMap.delete("two")

myOtherMap.forEach((value, key, map)=>{
    console.log("Key: %s, Value: %s %s", value.firstName, value.lastName);
})
/* Key: one, Value: Bob Dupon */

map.clear();
console.log(map.size); // 0

Conclusion

Cette nouvelle version apporte de nombreuses nouveautés intéressantes. Ces nouveautés commencent à être implémentées dans vos framework JavaScript favori, comme AngularJS 2 qui a annoncé l'adoption des modules natif.

Laisser un commentaire