Future of JavaScript: ECMAScript Harmony

Michał Gołębiowski

History of JavaScript

Created in 10 days of May 1995 by Brendan Eich.
Submitted to the Ecma International, where it was standardized as ECMAScript.
ECMAScript 1, 2, 3, ...4? Abandoned
Double-tiered approach:
1. "Fix" the language in ECMAScript 5.1.
  - strict mode: more errors, no implicit globals
  - minor syntax additions (getters, setters)
2. New syntax in ECMAScript 6, codename Harmony.
3. Simultaneous work on ECMAScript 7.

The `var` keyword

var x = 42;

function scope
hoisting


function f() {
    if (false) {
        var x = 42;
    } else {
        x; // no error, `x` is already declared!
    }
}

What's actually going on.


function f() {
    var x;
    if (false) {
        x = 42;
    } else {
        x; // no error, `x` is already declared!
    }
}

The `var` keyword

Function scope:


if (x == null) {
    var x = 42;
}

Let's change the fallback a little...


if (x == null) { // ReferenceError
    var y = 42;
}

What's actually executed:


var x;
if (x == null) { // `x` is declared before that line
    x = 42;
}


var y;
if (x == null) { // ReferenceError
    y = 42;
}

The `var` keyword

Function scope:

Leaking variables


var i = 42;
for (var i = 0; i < 8; i++) {}
console.log(i); // prints 8

The `let` keyword

Block scope


if (true) {
    let x = 42;
}
console.log(x); // ReferenceError


let x = 42;
if (true) {
    let x = 8;
    console.log(x); // prints 8
}
console.log(x); // prints 42

No hoisting


x = 2; // ReferenceError
let x;

The `const` keyword

Rules analogous to let:
- Block scope
- No hoisting
Requires initialization
Can't be overwritten

The `const` keyword

Requires initialization


const x; // SyntaxError

Can't be overwritten


const x = 42;
x = 8; // error!

const is shallow!


const a = [1, 2];
a[0] = "a";
console.log(a); // prints ["a", 2]

Olov Lassus:

const is the new var, not let!

Use outside of `strict mode`

let and const can be used outside of strict mode

Minor compatibility break


let[i] = [2];

In ES6 it's equivalent (via destructuring) to:


let i = 2;

In ES5:

let is treated as an array
the statement is setting let's ith value

`let`, `const`: browser support

Best support: Internet Explorer 11
Chrome: under the flag and only in strict mode
Firefox: not conforming to the spec (but let was their idea).

IE11 & Chrome gotcha:


for (let i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i); // prints 3 3 3, should print 0 1 2
    });
}

`let`, `const`: can you use it?

Traceur by Google - transpiles ES6 to ES5

defs.js by Olov Lassus: just for let & const

defs.js

Non-intrusive: preserves whitespaces


let x = 42;
if (true) {
    let x = 8;
}

defs output


var x = 42;
if (true) {
    var x$0 = 8;
}

No source maps (yet?) but they're not essential

grunt-defs by me: http://github.com/EE/grunt-defs

Rest parameters, spread operator

The problem: the arguments object


function f(arg1) {
    g.apply(null, [].slice.call(arguments, 1));
}

Boilerplate code:


     .apply(null, [].slice.call(            ));

Rest parameters, spread operator

Rest parameters


function f(arg1, ...rest) {
    console.log(rest); // rest is a regular array!
}
f(2, "a", 3); // prints ["a", 3]

Spread operator


const a = ["a", 2];
f(...a); // equivalent to f("a", 2)
const b = [0, ...a, "c"]; // `b` is [0, "a", 2, "c"]

Rest parameters, spread operator

The problem: the arguments object


function f(arg1) {
    g.apply(null, [].slice.call(arguments, 1));
}

Rewritten:


function f(arg1, ...rest) { // rest parameters
    g(...rest); // spread operator
}

Rest parameters, spread operator

Another example: f(a, b, c) === g(0, 0, b, c, 1)


function f(arg1) {
    var args = [].slice.call(arguments, 1);
    args.unshift(0, 0);
    args.push(1);
    g.apply(null, args);
}

Rewritten:


function f(arg1, ...rest) {
    g(0, 0, ...rest, 1);
}

Browser support: Firefox

Arrow functions

function keyword is too long!

Why do we have to use return for a single-line function?


[1, 2, 3, 4].map(function (x) {return x * x;}); // -> [1, 4, 9, 16]

Boilerplate code:


                 function ( ) {return      ;})

Let's shorten it


[1, 2, 3, 4].map(x => x * x); // -> [1, 4, 9, 16]

Arrow functions

Non-lexical this


function EnsureF() {
    this.invoke = function (arg) {
        f(arg);
    };
    setTimeout(function () {
        console.error("this.invoke wasn't called!");
        this.invoke(0); // oopsie!
    }, 10000);
}


function EnsureF() {
    this.invoke = arg => {
        f(arg);
    };
    setTimeout(() => {
        console.error("this.invoke wasn't called!");
        this.invoke(0); // works fine!
    }, 10000);
}

Browser support: Firefox

Generators

Functions that can stop execution, return partial results


function* numbers() {
    yield 1;
    yield 2;
    return 3;
}


const seq = numbers();
seq.next(); // { value: 1, done: false }
seq.next(); // { value: 2, done: false }
seq.next(); // { value: 3, done: true }
seq.next(); // Error


function* fibonacci() {
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}
const seq = fibonacci();
[seq.next().value, seq.next().value, ...] // [1, 1, 2, 3, 5, 8, ...]

`for-of`

Iterating over arrays, sets, etc.


var a = ["a", "b", "c"];
for (var e in a) {
    console.log(e); // prints 0 1 2
}


var a = ["a", "b", "c"];
for (var i = 1; i < a.length; i++) {
    console.log(a[i]); // prints a b c
}

In ES6:


var a = ["a", "b", "c"];
for (let e of a) {
    console.log(e); // prints a b c
}

Browser support: Firefox

Default parameter values


function f(par1, par2, par3) {
    if (typeof par1 === "undefined") {
        par1 = 6;
    }
    if (typeof par1 === "undefined") {
        par2 = par1 + 1;
    }
    if (typeof par1 === "undefined") {
        par3 = par1 * par2;
    }
    console.log(par1, par2, par3);
}


function f(par1 = 6, par2 = par1 + 1, par3 = par1 * par2) {
    console.log([par1, par2, par3]);
}
f();        // prints [6, 7, 42]
f(1);       // prints [1, 2, 2]
f(1, 1);    // prints [1, 1, 1]
f(1, 1, 2); // prints [1, 1, 2]

Classes

Simulating classical inheritance


function Person(name) {
    this.name = name;
}
Person.prototype.introduce = function () {
    console.log("I'm " + this.name);
};
function Programmer(name) {
    Person.call(this, name);
}
Programmer.prototype = Object.create(Person.prototype);
Programmer.prototype.constructor = Programmer;
Programmer.prototype.introduce = function () {
    Person.prototype.introduce.apply(this, arguments);
    console.log("I'm a programmer");
};
var programmer = new Programmer("John");
programmer.introduce(); // prints "I'm John", "I'm a programmer"

Classes

Simulating classical inheritance


class Person {
    constructor(name) {
        this.name = name;
    }
    introduce() {
        console.log("I'm " + this.name);
    }
}
class Programmer extends Person {
    introduce() {
        super();
        console.log("I'm a programmer");
    }
}
var programmer = new Programmer("John");
programmer.introduce(); // prints "I'm John", "I'm a programmer"

Let's mix it up!


function Superhero(name) {
    if (typef name === "undefined") { name = "Superhero"; }
    this.name = name;
    this.powers = [].slice.call(arguments, 1);
    this.powers.unshift("speed");
}
Superhero.prototype.usePower = function (power) {
    console.log("I've used the power: " + power);
}
Superhero.prototype.schedulePowers = function () {
    var self = this;
    for (var i = 0; i < this.powers.length; i++) {
        (function (power) {
            setTimeout(function () { self.usePower(power); });
        })(this.powers[i]);
    }
}

Let's mix it up!


class Superhero {
    constructor(name = "Superhero", ...powers) {
        this.name = name;
        this.powers = ["speed", ...powers];
    }
    usePower(power) {
        console.log("I've used the power: " + power);
    }
    schedulePowers() {
        for (let power of this.powers) {
            setTimeout(() => this.usePower(power));
        }
    }
};

Asynchronous code

Callback hell


doSth(arg, function (result1) {
    doSthElse(result1);
});


doSth(arg, function (result1) {
    doSthElse(result1, function (result2) {
        doSthElse2(result2, function (result3) {
            doSthElse3(result3, function (result4) {
                doSthElse4(result4);
            });
        });
    });
});

Asynchronous code

Promises


doSth(arg)
    .then(function (result1) {
        doSthElse(result1);
    });


doSth(arg)
    .then(function (result1) {
        doSthElse(result1)
    })
    .then(function (result2) {
        doSthElse2(result2)
    })
    .then(function (result3) {
        doSthElse3(result3)
    })
    .then(function (result4) {
        doSthElse4(result4)
    });

Asynchronous code

Promises

Errors are turned into rejections


doSth(arg)
    .then(function (result1) {
        throw new Error('Error has happened!');
    })
    .catch(function (error1) {
        // Handle error here.
    });

Asynchronous code

`await` and `async` (proposed for ECMAScript 7)


async function animate(elem, animations) {
    var ret = null;
    try {
        for (const anim in animations) {
            ret = await anim(elem);
        }
    } catch(e) {
        // Handle an error
    }
    return ret;
}

anim(elem) returns a promise

Future of JavaScript: ECMAScript Harmony

History of JavaScript

The `var` keyword

The `var` keyword

Function scope:

The `var` keyword

Function scope:

The `let` keyword

The `const` keyword

The `const` keyword

Use outside of `strict mode`

`let`, `const`: browser support

`let`, `const`: can you use it?

defs.js

Rest parameters, spread operator

Rest parameters, spread operator

Rest parameters, spread operator

Rest parameters, spread operator

Arrow functions

Arrow functions

Generators

`for-of`

Default parameter values

Classes

Classes

Let's mix it up!

Let's mix it up!

Asynchronous code

Asynchronous code

Promises

Asynchronous code

Promises

Asynchronous code

`await` and `async` (proposed for ECMAScript 7)

Traceur: jsbin.com

Thank you!

Future of JavaScript: ECMAScript Harmony

History of JavaScript

The var keyword

The var keyword

Function scope:

The var keyword

Function scope:

The let keyword

The const keyword

The const keyword

Use outside of strict mode

let, const: browser support

let, const: can you use it?

defs.js

Rest parameters, spread operator

Rest parameters, spread operator

Rest parameters, spread operator

Rest parameters, spread operator

Arrow functions

Arrow functions

Generators

for-of

Default parameter values

Classes

Classes

Let's mix it up!

Let's mix it up!

Asynchronous code

Asynchronous code

Promises

Asynchronous code

Promises

Asynchronous code

await and async (proposed for ECMAScript 7)

Traceur: jsbin.com

Thank you!

The `var` keyword

The `var` keyword

The `var` keyword

The `let` keyword

The `const` keyword

The `const` keyword

Use outside of `strict mode`

`let`, `const`: browser support

`let`, `const`: can you use it?

`for-of`

`await` and `async` (proposed for ECMAScript 7)