Présentation de ES6, le futur de Javascript

Dev FrontJavascript

La Hype autour de l’ECMAScript 6, ou ES6 pour les intimes, s’installe depuis quelques mois déjà. Mais qu’est-ce exactement que ce « ES6 » ? Qu’est-ce que ça apporte ? Répondons d’abord à la première question, et pour cela rien de tel qu’un petit historique du sujet.

Javascript, JScript et ECMAScript

tardis2Retournons en 1996.

Netscape 2 vient de sortir, avec son tout nouveau langage client : Javascript.

Quelques mois plus tard, Microsoft sort Internet Explorer 3.0 avec son propre langage, fortement inspiré de Javascript : JScript.

Netscape soumet alors son langage à l’ECMA, organisme européen chargé de définir des standards concernant notamment les langages de programmation. En 1997 le standard ECMAScript naît.

Depuis, Netscape a sombré et les navigateurs continuent d’implémenter leurs propres versions d’ECMAScript, qu’on appelle simplement, la plupart du temps, le Javascript. C’est pourquoi une évolution importante de ce standard signifie pas mal de nouveautés pour les développeurs front.

On entend finalement assez rarement parler d’ECMAScript, car, en plus d’être éclipsé par le terme « Javascript », il évolue très lentement (ce qui est aussi le cas du JS, du coup…). La version 5 date de 2009 et est celle sur laquelle se basent les navigateurs actuels, mais elle n’est même pas réellement finalisée. La version 4 a, elle, été abandonnée. Et la version 3 date de… 1999.

Bref, ES6 est plutôt une bonne nouvelle !

La compatibilité

aAY67Bd_460sa Comme on vient de le rappeler, ECMAScript n’est qu’un standard, chaque navigateur en fait ce qu’il veut.

Étonnamment, Microsoft Edge s’en sort très bien, équipé des dernières version du moteur JS de Microsoft, Chakra. Oubliez quand même les IE, Safari et les anciennes versions de Chrome ou Firefox, faut pas rêver. Les détails sont sur cette page.

Cependant, on se trouve encore manifestement dans une période de transition, et on y restera tant que Edge ne sera pas réellement installé. Il va donc falloir prendre son mal en patience.

On peut cependant tutoyer le futur avec des préprocesseurs qui traduisent du code ES6 en ES5 actuel, mais je ne conseillerais pas de les utiliser en production. Citons tout de même, par exemple, sprocket-es6.

Les nouvelles fonctionnalités

Maintenant qu’on a fait le point sur ES6, rentrons dans le vif du sujet. Bien sur, cet article n’a pas vocation à dresser une liste exhaustive, mais plutot une petite sélection perso.

Les classes

Javascript/ECMAScript a toujours été basé sur le concept des prototypes. ES6 standardise l’utilisation de classes, à l’instar de beaucoup d’autres langages.

class Vehicle {
    constructor (id, name, nbWheels) {
        this.id = id;
        this.name = name;
        this.nbWheels = nbWheels;
    }
}
class Car extends Vehicle {
    constructor (id, name) {
        super(id, name, 4);
    }
}

Pour utiliser les classes efficacement, ES6 met à disposition les outils classiques :

  • Héritage
  • Mot-clé super pour accéder au parent
  • Variables statiques
  • getters/setters avec les mots clés associés

Les Promises

Ou les promesses en bon français. Avant on pouvait utiliser des librairies externes, bientôt on le fera en natif.

var promise = new Promise(function(resolve, reject) {
	// action asynchrone : chargement de ressource, etc...
	if (/* tout est OK */) {
		resolve("Youpi !");
	}
	else {
		reject("Quelque chose à foiré");
	}
});
promise.then(function(result) {
	console.log(result);
}, function(error) {
	console.log(error);
});

Les arguments par défaut

On peu se demander pourquoi il était impossible jusque là de définir, en JS, des valeurs par défauts pour les paramètres de fonction (et de classes maintenant). Sortez les confettis, cette fonctionnalité arrive enfin avec ES6 !

	function(foo, bar = "baz") {
		// Fait des trucs
	}

ay5N4Bb_460sa

Les constantes

A ranger, comme le point précédent, dans la catégorie « pourquoi ils ne l’ont pas fait avant ?! ».

	const FOO = "Foo";

(comment ça il sert à rien mon exemple ?)

Interpolation de chaînes

	var product = {name: "Foo", price: 12, quantity: 3};
	console.log("Salut, ${product.quantity} ${product.name}(s) coûtent ${product.quantity * product.price} € !");

Les fonctions fléchées

Voilà de quoi remplacer les fonctions anonymes, un peu trop verbeuses au goût de certains ! Dans certains cas on gagne quand même en lisibilité. Voici un exemple qui compare les 2 syntaxes :

// ES5
console.log([4, 8, 25].map(function(item, i) { return item * 2; }));
// ES6
console.log([4, 8, 25].map((item, i) => item * 2));

Les autres

Pour une liste plus complète des nouveautés apportées par ES6, je vous renvoie sur cette page : http://es6-features.org/

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>