ESCMAScript 6: Get Ready For The Future. Now

Get Ready ForThe Future. Now

ECMAScript 6

@szafranek

July 2008

ES4Dec 1999

ES3

Dec 2013Dec 2009

ES5 ES6

ES6 aka Harmony

Backwards compatibility

No “bad parts”are removed

“Better carrots”

Superset of ES 5 strict mode

Block scope

5

hoisting

var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i);

1

hoisting

var i = 1;function b() { i = 10; for (var i = 0; i < 3; i++) { //... }}b();console.log(i); // 1

1

let

letlet

letlet

•Block scope

letlet

•Block scope•No hoisting

letlet

•Block scope•No hoisting•Fails fast

letlet

•Block scope•No hoisting•Fails fast

= better var

var i = 1;function b() { i = 10; for (let i = 0; i < 3; i++) { //... }}b();console.log(i); // 10

var things = {};for (var i = 0; i < 3; i++) { things["fun" + i] = function() { console.log(i); };}

things["fun0"](); // 3things["fun1"](); // 3things["fun2"](); // 3

var things = {};for (var i = 0; i < 3; i++) { things["fun" + i] = (function(index) { return function() { console.log(index); }; }(i));}

things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2

var things = {};for (var i = 0; i < 3; i++) { let index = i; things["fun" + i] = function() { console.log(index); };}

things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2

constconst

const pi = Math.PI;// ...pi = 10; // SyntaxError

const

function process() { const factor = 10; let result = 5; result *= 3; // thousands lines of code... return result * factor;}

Most variables don't change over time.Using const helps spot unwanted side effects.

constconst = better let

function process() { const factor = 10; let result = 5; result *= 3; // thousands lines of code... return result * factor;}

Most variables don't change over time.Using const helps spot unwanted side effects.

“I am a full const nazi nowadays”

John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’t const every variable and parameter that can be."http://www.phoronix.com/scan.php?page=news_item&px=MTI3NDQ

Use let and const today

defs.js

http://blog.lassus.se/2013/05/defsjs.html

Destructing

10

let point = [3, 7];let [x, y] = point;

console.log(x, y);

let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];

console.log(primary, secondary); // blue red

let point = [3, 7, 5];let [, y] = point;

console.log(y); // 7

Selecting only elements you want

let coords = {long: 11, lat: 45};let {long, lat} = coords;

console.log(long, lat); // 11 45

Destructing objects

let coords = {long: 11, lat: 45};let {long: longitude, lat: latitude} = coords;

console.log(longitude, latitude); // 11 45

Mapping to custom names

Spread operator

let numbers = [3, 10, 7];Math.max(...numbers); // 10

let nodeArray = [...document.querySelectorAll("p")];

var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);

ES6

ES5

Rest parameters

function tax(rate, ...values) { //...}

tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]

15

function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}

function tax() { var args = Array.prototype.slice.call(arguments); var rate = args[0]; var values = args.splice(1);

var taxedValues = []; for (var i = 0; i < values.length; i++) { var value = values[i]; taxedValues.push(rate * value); }; return taxedValues;}

ES5

ES6

function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}

function tax() { var args = Array.prototype.slice.call(arguments); var rate = args[0]; var values = args.splice(1);

var taxedValues = []; for (var i = 0; i < values.length; i++) { var value = values[i]; taxedValues.push(rate * value); }; return taxedValues;}

ES5

ES6

Iterators

let elements = ["one", "two", "three"];elements.customProperty = "Won't show up";for (let element of elements) { console.log(element);}

// "one" "two" "three"

Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};

for (var key in obj) { if (obj.hasOwnProperty(key)) { console.log(key, obj[key]); }}

Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};

import items from @"iter";for (let [key, value] of items(obj) { console.log(key, value);}

ES6

ES5

built-in iterators

keys(obj);values(obj);items(obj);

allKeys(obj);allValues(obj);allItems(obj);

Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};

import items from @"iter";for (let [key, value] of items(obj) { console.log(key, value);}

Modulesin progress!

18

module Map { export function zoom(coords) { console.log("zooming to ", coords); }; export function pan(coords) { console.log("panning to ", coords); }; export var defaultMode = "satellite";};

import {zoom, defaultMode} from Map;zoom({lat: 30, long: 10});

module loaders

Loader.load('map.js', function (map) { map.zoom({lat: 30, long: 10});}, errorCallback);

loader pipeline

Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();

Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.

https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

loader pipeline

Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();

// CoffeeScript!

Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.

https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

loader pipeline

Loader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();

// CoffeeScript!// AMD, Common.js!

Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable with ES6 modules.

https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

function tax(rate, ...values) { let taxedValues = []; for (let value of values) { taxedValues.push(rate * value); } return taxedValues;}

Arrow functions

function tax(rate, ...values) { return values.map(value => rate * value);}

lexical this

function Greeter() { this.name = "jsDay"; this.hello = function() { console.log("Hello " + this.name); }}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);

ES5

function Greeter() { this.name = "jsDay"; this.hello = function() { console.log("Hello " + this.name); }}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);

ES5

function Greeter() { this.name = "jsDay"; this.hello = () => console.log("Hello " + this.name)}var greet = new Greeter();setTimeout(greet.hello, 1000);

ES6

Last but not least...

20

Classes

function Vehicle(name) { this.name = name;}Vehicle.prototype.drive = function () { return "Wrooom";};

// Inheritancefunction Car(name, maxSpeed) { Vehicle.call(this, name); this.maxSpeed = maxSpeed;}

Car.prototype = Object.create(Vehicle.prototype);Car.prototype.constructor = Car;Car.prototype.drive = function () { return Vehicle.prototype.drive.call(this) + " at " + this.maxSpeed;};

class Vehicle { constructor(name) { this.name = name; } drive() { return "Wrooom"; }}

// Inheritanceclass Car extends Vehicle { constructor(name, maxSpeed) { super.constructor(name); this.maxSpeed = maxSpeed; } drive() { return super.drive() + " at " + this.maxSpeed; }}

Iterators

Classes

Destructing

Block scope

ModulesIterators

Iterators

Spread operatorRest parameters

Arrow functions

Iterators

Maps

Promises WeakMapsSetsUnicode Proxies

Iterators

Binary data

Tail callsGeneratorsTemplate stringsAPI improvements

Comprehensions

ES6 today

Firefox Nightly*

Some features are not implemented as in the recent version of the spec, e.g. let.

Chrome Canaryabout:flags

node --harmony

Thank you!

@szafranek

www.2ality.com

www.brendaneich.com

kangax.github.io/es5-compat-table/es6

Photo credits

QuakeCon

cloud2013

Monty Python

iluvgadgets

1