Arrow function

Simple Arrow function

// ES5
var x = function(y, z) {
    return y + z;
};

// ES6
var x = (x, y) => {
    return x + y;
};

// ES3
var obj = {
    onClick: function() {
        console.log(this);
    },
    init: function() {
        var _this = this; // that, raoul, toto, instance, marty, ...
        document.addEventListener('click', function() {
            _this.onClick();
        });
    }
};

// ES5
var obj = {
    onClick: function() {
        console.log(this);
    },
    init: function() {
        document.addEventListener('click', function() {
            this.onClick();
        }.bind(this));
    }
};

obj.init();

// ES6
var obj = {
    onClick() {
        console.log(this);
    },
    init() {
        document.addEventListener('click', () => {
            this.onClick()
        });
    }
};

obj.init();

Javascript class ?

Class in ES5

var Car = function(color) {
    this.color   = color;
    this.counter = 0;
};

Car.prototype.drive = function(distance) {
    this.counter += distance;
};

Class keyword

class Car {
    constructor(color) {
        this.color   = 0;
        this.counter = 0;
    }

    drive(distance) {
        this.counter += distance;
    }
}

Inheritance

class Delorean extends Car {
    drive(distance, time) {
        super(distance);
        this.time = time;
    }
}

React component

class MyComponent extends React.Component {
  render() {
    return <div>My component</div>;
  }
}

Functions

Default parameter value

myFunction(param = 10) {
    console.log(param);
};

myFunction();

Named parameters

function fn({x, y}) {};

fn({y: 10});

Spread operator

function fn(x, y, z) {}

var params = [1, 2, 3];

fn(...params);

function fn2(...params) {}

fn2(1, 3, 4);

Mutiple returns

var fn = () => {
  return {x: 1, y: 3};
};

var {x, y} = fn();

console.log(x); // 1
console.log(y); // 3

Misc

String

Template string

var name = "Mapado";
console.log(`Hello, ${name}!`); // Hello, Mapado

Multiline Strings

var text = "Lorem \
Ipsum";

Use ES6 today ?

Compiler

• Traceur (google)
• es6-shim
• es6-transpiler
• Babel <3

Babel

• Browser: plugin gulp/grunt
• Node : require('babel/register')

Resume

• no notable performances issues
• Compatible IE9+
• IE8 with es5-shim

ES7 ?

Comprehensions

var results = (
  for(c of customers)
    if (c.city == "Lyon")
      { name: c.name, age: c.age }
)

Features

• Unicode
• async/await
• ...