ES6 en pratique



Slides : thib.me/es6


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