ES6

and why it's better than ES5

Some facts

• Final standard: June 2015
• https://kangax.github.io/compat-table/es6/
• caniuse.com

ES6

ES5

Constants

const PI = 3.141593

//  only in ES5 through the help of object
//  properties and only in global context 
//  and not in a block scope
Object.defineProperty(
  typeof global === "object" ? 
    global : window, 
    "PI", {
      value:        3.141593,
      enumerable:   true,
      writable:     false,
      configurable: false
})

ES6

ES5

Block-scoped variables

for (let i = 0; i < 10; i++) {
    let x = i;
}

// ReferenceError: x is not defined
console.log(x); 

// ReferenceError: i is not defined
console.log(i);

//  not really a feature


for (var i = 0; i < 10; i++) {
    var x = i;
}

x=null;

ES6

ES5

Arrow functions

var obj = {
    key: "Hello",

    run: function() {
        var arr = [1,2,3]

        var inc = arr.map( (x) => x+1 );
        console.log(inc); // [3,4,5]



        arr.forEach((x) => {
            console.log(this.key); // Hello
            console.log(x);        // 1 2 3
        });
    }
}
obj.run();

var obj = {
    key: "Hello",

    run: function() {
        var arr = [1,2,3]

        var inc = arr.map( function(x) {
            return x+1;
        });
        console.log(inc); // [3,4,5]

        var self = this;
        arr.forEach( function(x) {
            console.log(self.key); // Hello
            console.log(x);        // 1 2 3
        });
    }
}
obj.run();

ES6

ES5

Extended Parameter Handling

//  only in ES5 through the help of object

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50








function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7) === 9

//  only in ES5 through the help of object

function f (x, y, z) {
    if (y === undefined) {
        y = 7;
    }
    if (z === undefined) {
        z = 42;
    }
    return x + y + z;
};
f(1) === 50;


function f (x, y) {
    var a = Array.prototype.slice
            .call(arguments, 2);
    return (x + y) * a.length;
};
f(1, 2, "hello", true, 7) === 9;

Debate!

'string' vs. "string"

ES6

ES5

String interpolation

message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product}
a total of ${card.amount * card.unitprice}?`

message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " 
+ card.product + " \n" +
"a total of " + (card.amount * card.unitprice);

ES6

ES5

Property Shorthand

function (x, y) {
    var a = {x, y};
}

function (x, y) {
    var a = {x: x, y: y};
}

ES6

ES5

Computed Property Names

function (field) {
    var a = {
        [ field + getIndex() ]: 23
    };
}

function (field) {
    var key = field + getIndex();
    var a = {};
    a[key] = 23;
}

ES6

ES5

Classes

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};

Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};



var Rectangle = 
    function (id, x, y, width, height) {
        Shape.call(this, id, x, y);
        this.width  = width;
        this.height = height;
};
Rectangle.prototype = Object
                .create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

ES6

ES5

Promise

var busy = false;

var asyncGet = function() {
   return new Promise((resolve,reject) => {
        setTimeout(() => {
            if (busy) {
                reject("Maybe later")
            } else {
                resolve("Why not");
            }
        }, 1000)
    });
}

asyncGet().then(
    function onResolve(data) {
        console.log(data)
    },
    function onReject(err) {
        console.error(err);
    }
);

var busy = false;

var asyncGet = function(
    callbackSuccess,
    callbackError) {

        setTimeout(function() {
            if (busy) {
                callbackError("Maybe later")
            } else {
                callbackSuccess("Why not");
            }
        }, 1000)
}

asyncGet(
    function onResolve(data) {
        console.log(data)
    },
    function onReject(err) {
        console.error(err);
    }
);

ES6

ES5

Generators

function *foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo( 5 );

console.log( it.next() );          
// { value:6, done:false }

console.log( it.next( 12 ) );   
// { value:8, done:false }

console.log( it.next( 13 ) );   
// { value:42, done:true }

// Are you kidding?

Should I use ES6 features?

Nodejs

5.0: > 50% support

Babel

JS transpiler

Crosswalk

JS for hybrid apps

(chromium 41)

Electron

(mostly via babel)

Q&A