ES6 Quick Wins







Thibaud Colas - @thibaud_colas

Slides : thib.me/talks/

Évolution du langage


  • 1995 : LiveScript @ Netscape
  • 1999 : ES3 — regex, try/catch
  • 2009 : ES5 / ES3.1 — "use strict", JSON
  • 2015 ? : ES6 / Harmony — classes, générateurs, modules, métaprogrammation
  • Ensuite : ES7 — surcharge d'opérateurs, pattern matching, traits


Source: A Short History of JavaScript

Support des fonctionnalités

Liste de features sur GitHub : lukehoban/es6features

Quick Wins



  • Fonctionnalités simples à utiliser
  • Utilisables dès aujourd'hui
  • Compatibles Traceur & Firefox 27+

Default parameters



var addES5 = function(x, y) {
y = y || 5;
return x + y;
};


var addES6 = function(x, y = 5) {
return x + y;
};

Destructuring



var Circle = function(x, y, r) {
this.center = {x: x, y: y};
this.radius = r;
};

var c = new Circle(3, 5, 10);

var centerX = c.center.x; // ES5
var centerY = c.center.y; // ES5

var {x: centerX, y: centerY} = c.center; // ES6

var {x, y} = c.center; // ES6 raccourci

Destructuring



var getDiameterES5 = function(c) {
return c.radius * 2;
};

var getDiameterES6 = function({radius: r}) {
return r * 2;
};

Fonctionne aussi pour les paramètres !

Map & Set



var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

Lambdas / Arrow functions


var squareES5 = function (x) {
return x * x;
};


var squareES6 = x => x * x;


var squareES6Compiled = (function(x) {
return x * x;
});

Syntaxe plus lisible, return implicite

Programmation fonctionnelle FTW

Lambdas / Arrow functions


var ES5Tree = function() {
var self = this; // Contexte A
self.age = 0;

setInterval(function () {
self.age++; // Contexte B :(
}, 2000);
};

var ES6Tree = function() {
this.age = 0; // Contexte C

setInterval(() => {
this.age++; // Contexte C toujours !
}, 2000);
};

var tree = new ES6Tree();

Pourquoi utiliser ces nouveautés ?


  • Meilleure expressivité
  • Code plus lisible
  • Porte d'entrée vers des features plus complexes



ES6 est déjà utilisé par des projets comme AngularJS 2.0, Ember, Koa

... et par des compagnies comme Facebook, Google, Square

Aller plus loin


Merci !



Par Thibaud Colas, partage en CC0