ES6 en pratique



Slides : thib.me/talks/


thibaud_colas Thibaud Colas - @thibaud_colas
Ingénieur Développeur @ CGI

Évolution du standard


  • ES3 : 1999 — regex, try/catch
  • ES5 : 2009 — "use strict", JSON
  • ES6 : 2014 ? — classes, générateurs, modules, métaprogrammation
  • ES7 : WIP — surcharge d'opérateurs, pattern matching, traits

Support des fonctionnalités

Liste de features sur GitHub : lukehoban/es6features

Exemples



Sucre syntaxique utilisable dès aujourd'hui


Compatibles Traceur & Firefox 24+

Versions originales et transpilées sur GitHub :
thibaudcolas/es6-mix-it

Default parameters


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

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

var addES6Compiled = function(x) {
var y = arguments[1] !== (void 0) ? arguments[1] : 5;
return x + y;
};

Remplace (typeof myVar === "undefined")

Destructuring


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

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

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

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

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

Assignement multiple selon un pattern

Destructuring


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

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

var getDiameterES6Compiled = function($__0) {
var r = $__0.radius;
return r * 2;
};

Fonctionne aussi pour les paramètres !

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();

Aller plus loin


Merci !



Par Thibaud Colas, partage en CC0