ECMAScript 6Drama in 5 acts

Piotr Lewandowski20.03.2015

All temporary solutionsbecome final

Act 1 - Preludium

ES 4

ES 4ES 6

ES 4ES 6ES 2015

Make JavaScript betterfor complex applicationfor librariesas target of code generators

Pave the Cowpaths

and don't break the web

ModulesAct 2

Design goalsCompact syntaxSupport cyclic dependenciesAsynchronous loadingConfigurable

Design goalsCompact syntaxSupport cyclic dependenciesAsynchronous loadingConfigurable

// lib/math.js

export function sum(x, y) { return x + y;}

export var pi = 3.141593;

// app.js

import * as math from "lib/math";

math.sum(22, 20); // 42

// Default exports and named exports import myLib from 'src/mylib'; import { function1, function2 } from 'src/mylib';

Importing

// Default exports and named exports import myLib from 'src/mylib'; import { function1, function2 } from 'src/mylib';

Importing

// Renaming: import named1 as myNamed1 import { function1 as fn, function2 } from 'src/mylib';

// Default exports and named exports import myLib from 'src/mylib'; import { function1, function2 } from 'src/mylib';

Importing

// Renaming: import named1 as myNamed1 import { function1 as fn, function2 } from 'src/mylib';

// Importing the module as an object // (with one property per named export) import * as mylib from 'src/mylib';

// Default exports and named exports import myLib from 'src/mylib'; import { function1, function2 } from 'src/mylib';

Importing

// Renaming: import named1 as myNamed1 import { function1 as fn, function2 } from 'src/mylib';

// Importing the module as an object // (with one property per named export) import * as mylib from 'src/mylib';

// Only load the module, don’t import anything import 'src/mylib';

SyntaxAct 3

Object {} enhancement

let firstName = 'Joe';let lastName = 'Doe';

let person = { firstName, ['last' + 'Name']: lastName, getAge() { return 42; }};

person.firstName // Joeperson.lastName // Doeperson.getAge() // 42

var firstName = 'Joe';var lastName = 'Doe';

var person = { firstName: firstName, getAge: function() { return 42; }};

person['last' + 'Name'] = lastName;

person.firstName // Joeperson.lastName // Doeperson.getAge() // 42

ES6 ES5

Destructuringlet [a, , b] = [1, 2, 3];

Destructuringlet [a, , b] = [1, 2, 3];

[a, b] = [b, a]

let person = { firstName: 'Joe', lastName: 'Doe'. age: 42};

let { firstName, lastName } = person;

firstName // JoelastName // Doe

Destructuringlet [a, , b] = [1, 2, 3];

[a, b] = [b, a]

Spread operator

Math.max(...[1, 2, 3]);// the same asMath.max(1, 2, 3);

Spread operator

Math.max(...[1, 2, 3]);// the same asMath.max(1, 2, 3);

let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);

Spread operator

Math.max(...[1, 2, 3]);// the same asMath.max(1, 2, 3);

let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);

[head, ...tail] = [1, 2, 3, 4, 5];

Scope - let & constfunction foo() { a = 1;

if (a) { var a; let b = a + 2;

Scope - let & constfunction foo() { a = 1;

if (a) { var a; let b = a + 2;

console.log( b ); }

console.log( a ); console.log( b );}

Scope - let & constfunction foo() { a = 1;

if (a) { var a; let b = a + 2;

console.log( b ); }

console.log( a ); console.log( b );}

console.log( b ); // 3 }

console.log( a ); // 1 console.log( b ); // ReferenceError: b is not defined}

function foo() { a = 1; // careful, a has been hoisted!

if (a) { var a; // hoisted to function scope! let b = a + 2; // b block-scoped to if block!

Scope - let & constfunction foo() { a = 1;

if (a) { var a; let b = a + 2;

console.log( b ); }

console.log( a ); console.log( b );}

console.log( b ); // 3 }

console.log( a ); // 1 console.log( b ); // ReferenceError: b is not defined}

function foo() { a = 1; // careful, a has been hoisted!

if (a) { var a; // hoisted to function scope! let b = a + 2; // b block-scoped to if block!

if (true) { const foo = "foo";

// error foo = "bar"; }

FunctionsAct 4

Classesclass Point { constructor(x, y) { this.x = x; this.y = y; }

toString() { return '(' + this.x + ', ' + this.y + ')'; }}

Classesclass Point { constructor(x, y) { this.x = x; this.y = y; }

toString() { return '(' + this.x + ', ' + this.y + ')'; }}

class ColorPoint extends Point { constructor(x, y, color) { super(x, y); this.color = color; } toString() { return super.toString() + ' in ' + this.color; }}

Classesclass Point { constructor(x, y) { this.x = x; this.y = y; }

toString() { return '(' + this.x + ', ' + this.y + ')'; }}

class ColorPoint extends Point { constructor(x, y, color) { super(x, y); this.color = color; } toString() { return super.toString() + ' in ' + this.color; }}

let cp = new ColorPoint(25, 8, 'green');cp.toString(); // '(25, 8) in green'

console.log(cp instanceof ColorPoint); // trueconsole.log(cp instanceof Point); // trueconsole.log(typeof Point); // function

Arrow functions (x, y) => x + y

Lexical scopeclass Person { constructor() { this.name = 'Joe'; }

// ...

load() { xhrGet(data => { this.name = data.name; }); }}

function Person { this.name = 'Joe';

// ...

this.load = function() { var that = this;

xhrGet(function(data) { that.name = data.name; }); }}

Lexical scope

vsdocument.body.addEventListener('click', function(event) { console.log(event, this) // EventObject, BodyElement});

document.body.addEventListener('click', event => console.log(event, this) // EventObject, WindowElement);

Default parametersfunction add(x = 0, y = 0) { return x + y;}

function add(x, y) { x = x || 0; y = y || 0;

return x + y;}

ES6

ES5

Rest parameterfunction friends(...friends) { friends.forEach(friend => { // ... }}

function friends() { var friends = [].slice.call(arguments, 1);

friends.forEach(function(friend) { // ... }}

ES6

ES5

Can I use it?Act 5 - Final

CompilatorsTypeScript

TraceurBabel

CompilatorsTypeScript

TraceurBabel

for back-endBabel-node for node.jsio.js - fork of node.js

Stay tunedand check

compatibility table

http://kangax.github.io/compat-table/es6/

Further reading2ality.comkangax ES6 compatibility tablebabeljs.io/docs/learn-es6