ECMAScript 6

Dr. Axel Rauschmayer

2ality.com

2013-05-30

Fluent 2013, San Francisco

About me

Axel Rauschmayer:

Editor of JavaScript Weekly

Blogger at 2ality.com

Co-organizer of MunichJS (JavaScript user group)

I have written about ECMAScript 6 since early 2011.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 2 / 71

JavaScript: big and dangerous
Black rhinoceros: mammal with highest rate of mortal combat
(males: 50%).

JavaScript: Used for much more than it was originally created for.
Let’s make it better for those tasks. . .
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 3 / 71
ECMAScript 6

ECMAScript 6: next version of JavaScript (current: ECMAScript 5).

This talk:
Why (goals)?
How (design process)?
What (features)?

Warning
All information is preliminary, features can and will change.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 4 / 71

Background
Glossary

Important terms:
TC39 (Ecma Technical Committee 39): the committee evolving
JavaScript.
Members: companies (all major browser vendors etc.).
Meetings attended by employees and invited experts.
JavaScript: colloquially: the language; formally: one implementation
ECMAScript: the language standard
ECMAScript Harmony: improvements after ECMAScript 5
(ECMAScript 6 and 7)
ECMAScript.next: code name for upcoming version, subset of
Harmony
ECMAScript 6: the final name of ECMAScript.next (probably)

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 6 / 71

Goals for ECMAScript 6

One of several official goals [1]: make JavaScript better

for complex applications

for libraries (possibly including the DOM)

as a target of code generators

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 7 / 71

How ECMAScript features are designed

Avoid “design by committee”:

Design by “champions” (groups of 1–2 experts)
Feedback from TC39 and the web community
TC39 has final word on whether/when to include

Stages [2]:
Strawman proposal
TC39 is interested ∆ proposal
Field-testing via one or more implementations, refinements
TC39 accepts feature ∆ included in ECMAScript draft
Included in final spec ∆ Standard

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 8 / 71

Variables and scoping
Block-scoped variables

Function scope (var) Block scope (let, const)

function order(x, y) { function order(x, y) {

console.log(tmp); console.log(tmp);
// undefined // ReferenceError:
// tmp is not defined
if (x > y) { if (x > y) {
var tmp = x; let tmp = x;
x = y; x = y;
y = tmp; y = tmp;
} }
return [x, y]; return [x, y];
} }

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 10 / 71

Destructuring: objects

Extract data (more than one value!) via patterns:

let obj = { first: Jane , last: Doe };

let { first: f , last: l } = obj;

console.log(f + + l); // Jane Doe

Usage:
variable declarations
assignments
parameter definitions

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 11 / 71

Destructuring: arrays

let [x, y] = [ a , b ];
// x= a , y= b

let [x, y, ...rest] = [ a , b , c , d ];

// x= a , y= b , rest = [ c , d ]

[x,y] = [y,x]; // swap values

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 12 / 71

Destructuring: refutable by default

Refutable (default): exception if match isn’t exact.

{ a: x, b: y } = { a: 3 }; // fails

Irrefutable: always match.

{ a: x, ?b: y } = { a: 3 }; // x=3, y=undefined

Default value: use if no match or value is undefined

{ a: x, b: y=5 } = { a: 3 }; // x=3, y=5

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 13 / 71

Arrow functions
Arrow functions: less to type

Compare:

let squares = [1, 2, 3].map(function (x) {return x * x});

let squares = [1, 2, 3].map(x => x * x);

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 15 / 71

Arrow functions: lexical this, no more that=this

function UiComponent {
var that = this;
var button = document.getElementById( #myButton );
button.addEventListener( click , function () {
console.log( CLICK );
that.handleClick();
});
}
UiComponent.prototype.handleClick = function () { ... };

function UiComponent {
let button = document.getElementById( #myButton );
button.addEventListener( click , () => {
console.log( CLICK );
this.handleClick();
});
}
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 16 / 71
Arrow functions: versions

General form:

(arg1, arg2, ...) => expr

(arg1, arg2, ...) => { stmt1; stmt2; ... }

Shorter version – single parameter:

arg => expr

arg => { stmt1; stmt2; ... }

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 17 / 71

Parameter handling
Parameter handling 1: parameter default values

Use a default value if parameter is missing.

function func1(x, y=3) {

return [x,y];
}

Interaction:

> func1(1, 2)
[1, 2]
> func1(1)
[1, 3]
> func1()
[undefined, 3]

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 19 / 71

Parameter handling 2: rest parameters

Put trailing parameters in an array.

function func2(arg0, ...others) {

return others;
}

Interaction:

> func2(0, 1, 2, 3)
[1, 2, 3]
> func2(0)
[]
> func2()
[]

Eliminate the need for the special variable arguments.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 20 / 71

Spread operator (...)

Turn an array into function/method arguments:

> Math.max(7, 4, 11)

11
> Math.max(...[7, 4, 11])
11

The inverse of a rest parameter

Mostly replaces Function.prototype.apply()
Also works in constructors

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 21 / 71

Parameter handling 3: named parameters

Use destructuring for named parameters opt1 and opt2:

function func3(arg0, { opt1, opt2 }) {

return return [opt1, opt2];
}
// {opt1,opt2} is same as {opt1:opt1,opt2:opt2}

Interaction:

> func3(0, { opt1: a , opt2: b })

[ a , b ]

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 22 / 71

Object-orientation and modularity
Object literals

// ECMAScript 6
let obj = {
__proto__: someObject, // special property
myMethod(arg1, arg2) { // method definition
...
}
};

// ECMAScript 5
var obj = Object.create(someObject);
obj.myMethod = function (arg1, arg2) {
...
};

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 24 / 71

Object literals: property value shorthand

Shorthand: {x,y} is the same as { x: x, y: y }.

∆ Convenient for multiple return values.

function computePoint() {
let x = computeX();
let y = computeY();
return { x, y }; // shorthand
}

let {x,y} = computePoint(); // shorthand

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 25 / 71

Symbols

Inspired by Lisp, Smalltalk etc.

A new kind of primitive value:
> let sym = Symbol();
> typeof sym
symbol
Each symbol is unique.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 26 / 71

Symbols: enum-style values

let red = Symbol();

let green = Symbol();
let blue = Symbol();

function handleColor(color) {
switch(color) {
case red:
...
case green:
...
case blue:
...
}
}

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 27 / 71

Symbols: property keys

let specialMethod = Symbol();

let obj = {
// computed property key
[specialMethod]: function (arg) {
...
}
};
obj[specialMethod](123);

Shorter – method definition syntax:

let obj = {
[specialMethod](arg) {
...
}
};
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 28 / 71
Symbols: property keys

Advantage: No name clashes!

Configure objects for ECMAScript and frameworks

∆ publically known symbols

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 29 / 71

Classes

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return ( +this.x+ , +this.y+ ) ;
}
}

function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return ( +this.x+ , +this.y+ ) ;
};
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 30 / 71
Classes: sub-type
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // same as super.constructor(x, y)
this.color = color;
}
toString() {
return this.color+ +super();
}
}

function ColorPoint(x, y, color) {

Point.call(this, x, y);
this.color = color;
}
ColorPoint.prototype = Object.create(Point.prototype);
ColorPoint.prototype.constructor = ColorPoint;
ColorPoint.prototype.toString = function () {
return this.color+ +Point.prototype.toString.call(this);
};
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 31 / 71
Static methods

class Point {
static zero() {
return new Point(0, 0);
}
constructor(x, y) {
this.x = x;
this.y = y;
}
}
let p = Point.zero();

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 32 / 71

Private properties

Hiding some properties from external access (object literals, classes):

Still under discussion.

Possibly: via a special kind of symbol.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 33 / 71

Modules: overview

// lib/math.js
let notExported = abc ;
export function square(x) {
return x * x;
}
export const MY_CONSTANT = 123;

// main.js
import {square} from lib/math ;
console.log(square(3));

Alternatively:
import lib/math as math;
console.log(math.square(3));
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 34 / 71
Modules: features

More features [3]:

Rename imports
Concatenation: put several modules in the same file
Module IDs are configurable (default: paths relative to importing file)
Programmatic (e.g. conditional) loading of modules via an API
Module loading is customizable:
Automatic linting (think: JSLint, JSHint)
Automatically translate files (CoffeeScript, TypeScript)
Use legacy modules (AMD, Node.js)
Syntax is still in flux!

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 35 / 71

Template strings
Template strings: string interpolation

Invocation:

templateHandler Hello ${first} ${last}!

Syntactic sugar for:

templateHandler([ Hello , , ! ], first, last)

Two kinds of tokens:

Literal sections (static): Hello
Substitutions (dynamic): first

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 37 / 71

Template strings: raw strings

Multiple lines, no escaping:

var str = raw This is a text

with multiple lines.

Escapes are not interpreted,

\n is not a newline. ;

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 38 / 71

Template strings: other use cases

Regular expressions (XRegExp: multi-line, ignoring whitespace)

Query languages
Text localization
Templating
etc.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 39 / 71

Standard library
Maps

Data structure mapping from arbitrary values to arbitrary values

(objects: keys must be strings).
let map = new Map();
let obj = {};

map.set(obj, 123);
console.log(map.get(obj)); // 123
console.log(map.has(obj)); // true

map.delete(obj);
console.log(map.has(obj)); // false

Also: iteration (over keys, values, entries) and more.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 41 / 71

Sets

A collection of values without duplicates.

let set1 = new Set();

set1.add( hello );
console.log(set1.has( hello )); // true
console.log(set1.has( world )); // false

let set2 = new Set([3,2,1,3,2,3]);

console.log(set2.values()); // 1,2,3

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 42 / 71

Object.assign

Merge one object into another one.

class Point {
constructor(x, y) {
Object.assign(this, { x, y });
}
}

Similar to Underscore.js _.extend().

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 43 / 71

Various other additions to the standard library

> abc .repeat(3)

abcabcabc
> abc .startsWith( ab )
true
> abc .endsWith( bc )
true

And more!

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 44 / 71

Loops and iteration
Iterables and iterators

Iterable: Iterator:
traversable data structure pointer for traversing iterable

... returns next()

[iterate]()

Examples of iterables:
Arrays
Results produced by tool functions and methods
(keys(), values(), entries()).

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 46 / 71

Iterators

import {iterate} from @iter ; // symbol

function iterArray(arr) {
let i = 0;
return { // both iterable and iterator
[iterate]() { // iterable
return this; // iterator
},
next() { // iterator
if (i < arr.length) {
return { value: arr[i++] };
} else {
return { done: true };
} } } }
for (let elem of iterArray([ a , b ])) {
console.log(elem);
}

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 47 / 71

for-of: a better loop

Current looping constructs:

for-in:
Basically useless for arrays
Quirky for objects

Array.prototype.forEach():
doesn’t work with iterables

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 48 / 71

for-of loop: iterables

Looping over iterables (incl. arrays).

let arr = [ hello , world ];

for (let elem of arr) {
console.log(elem);
}

Output – elements, not indices:

hello
world

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 49 / 71

for-of loop: objects

let obj = { first: Jane , last: Doe };

Iterate over properties:

import {entries} from @iter ; // returns an iterable

for (let [key, value] of entries(obj)) {
console.log(key + = + value);
}

Iterate over property names:

import {keys} from @iter ; // returns an iterable

for (let name of keys(obj)) {
console.log(name);
}

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 50 / 71

Generators
Generators: suspend and resume
function* generatorFunction() {
... a function
yield x;
... Shallow coroutines [4]: only
} function body is suspended.
Uses: iterators, simpler
returns
asynchronous programming.
generatorObject

next()

yield

next()

yield

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 52 / 71

Generators: example

Suspend via yield (“resumable return”):

function* generatorFunction() {
yield 0;
yield 1;
yield 2;
}

Start and resume via next():

let genObj = generatorFunction();

console.log(genObj.next()); // 0
console.log(genObj.next()); // 1
console.log(genObj.next()); // 2

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 53 / 71

Generators: implementing an iterator

An iterator for nested arrays:

function* iterTree(tree) {
if (Array.isArray(tree)) {
// inner node
for(let i=0; i < tree.length; i++) {
yield* iterTree(tree[i]); // recursion
}
} else {
// leaf
yield tree;
}
}

Difficult to write without recursion.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 54 / 71

Generators: asynchronous programming

Using the task.js library:

spawn(function* () {
try {
var [foo, bar] = yield join(
read("foo.json") , read("bar.json")
).timeout(1000);
render(foo);
render(bar);
} catch (e) {
console.log("read failed: " + e);
}
});

Wait for asynchronous calls via yield (internally based on promises).

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 55 / 71

Comprehensions

Array comprehensions produce an array:

let numbers = [1,2,3];

let squares = [for (x of numbers) x*x];

Generator comprehensions produce a generator object (an iterator):

let squares = (for (x of numbers) x*x);

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 56 / 71

Conclusion
Time table

ECMAScript specification:

November 2013: final review of draft

July 2014: editorially complete

December 2014: Ecma approval

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 58 / 71

Using ECMAScript 6 today

First features are already in engines [5]

Traceur by Google: compiles ECMAScript 6 to ECMAScript 5.
dynamically (on the fly)
statically (e.g. via tools)
TypeScript by Microsoft:
ECMAScript 6 + optional static typing (at development time)
compiles to ECMAScript 5
es6-shim by Paul Miller: features of the ES6 standard library,
backported to ES5.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 59 / 71

Thank you!
Annex
References

1 ECMAScript Harmony wiki

2 “The Harmony Process” by David Herman
3 “ES6 Modules” by Yehuda Katz
4 “Why coroutines won’t work on the web” by David Herman
5 “ECMAScript 6 compatibility table” by kangax [features already in
JavaScript engines]

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 62 / 71

Resources

ECMAScript 6 specification drafts by Allen Wirfs-Brock

ECMAScript mailing list: es-discuss
TC39 meeting notes by Rick Waldron
“A guide to 2ality’s posts on ECMAScript 6” by Axel Rauschmayer
Continuum, an ECMAScript 6 virtual machine written in
ECMAScript 3.
(Links are embedded in this slide.)

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 63 / 71

Bonus: proxies
Proxies

Observe operations applied to object proxy, via handler h:

let target = {};

let proxy = Proxy(target, h);
Each of the following operations triggers a method invocation on h:
proxy[ foo ] æ h.get(target, foo , p)
proxy[ foo ] = 123 æ h.set(target, foo , 123, p)
foo in proxy æ h.has(target, foo )
for (key in proxy) {...} æ h.enumerate(target)

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 65 / 71

Proxies in the prototype chain

let child = Object.create(proxy);

Operations on child can still trigger handler invocations

(if the search for properties reaches proxy):
child[ foo ] æ h.get(target, foo , ch)
child[ foo ] = 123 æ h.set(target, foo , 123, ch)
foo in child æ h.has(target, foo )
for (key in child) {...} æ h.enumerate(target)

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 66 / 71

Proxy: example

let handler = {
get(target, name, receiver) {
return (...args) => {
console.log( Missing method +name
+ , arguments: +args);
}
}
};
let proxy = Proxy({}, handler);

Using the handler:

> let obj = Object.create(proxy);

> obj.foo(1, 2)
Missing method foo, arguments: 1, 2
Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 67 / 71
Use cases for proxies

Typical meta-programming tasks:

Sending all method invocations to a remote object
Implementing data access objects for a database
Data binding
Logging

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 68 / 71

More bonus slides
Template strings: regular expressions

ECMAScript 5 (XRegExp library):

var str = /2012/10/Page.html ;
var parts = str.match(XRegExp(
^ # match at start of string only \n +
/ (?<year> [^/]+ ) # capture top dir as year \n +
/ (?<month> [^/]+ ) # capture subdir as month \n +
/ (?<title> [^/]+ ) # file name base \n +
\\.html? # file name extension: .htm or .html \n +
$ # end of string ,
x
));

console.log(parts.year); // 2012

XRegExp features: named groups, ignored whitespace, comments.

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 70 / 71

Template strings: regular expressions

ECMAScript 6:

let str = /2012/10/Page.html ;

let parts = str.match(XRegExp.rx
^ # match at start of string only
/ (?<year> [^/]+ ) # capture top dir as year
/ (?<month> [^/]+ ) # capture subdir as month
/ (?<title> [^/]+ ) # file name base
\.html? # file name extension: .htm or .html
$ # end of string
);

Advantages:
Raw characters: no need to escape backslash and quote
Multi-line: no need to concatenate strings with newlines at the end

Dr. Axel Rauschmayer (2ality.com) ECMAScript 6 2013-05-30 71 / 71