ES6 Features

Status

Most features have been finalized
Many polyfills and transpilers
Some features are already supported in browsers and Node.js
May be released this year (2015)

Arrows

Function shorthand using =>

same lexical this as surrounding code

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

Classes

Simple sugar over the prototype-based OO pattern

inheritance
super calls
instance
static methods
constructors

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Enhanced Object Literals

Support setting the prototype at construction

shorthand for foo: foo assignment
defining methods
super calls
dynamic property names

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Template Strings

Syntactic sugar for constructing strings

multiline
interpolation
avoiding injection attack

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

fn`Hello ${you}! You're looking ${adjective} today!`

“desugars” into ↓

fn(["Hello ", "! You're looking ", " today!"], you, adjective);

Destructuring

Allows binding using pattern matching

(arrays & objects)

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

Default + Rest + Spread

default parameter values
trailing parameters to array
array to consecutive arguments

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}

f(3) == 15
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}

f(3, "hello", true) == 6
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

Block-scoped binding constructs

let: var within block scope
const: single assignment

function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

Iterators + For..Of

custom iteration
next(), value, done
generalize for..in with for..of

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Use cases of iterators

for..of
destructuring
yield *
Array.from()
Map, Set, WeakMap, WeakSet
...

`for..of` vs. `for..in` in arrays

var colors = ['red', 'green', 'blue'];

// iterate through index
for (let i in colors) {
  console.log(colors[i]);
}

// iterate through values
for (let color of colors) {
  console.log(color);
}

Generators

Simplify iterator-authoring using function* and yield

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Unicode

Non-breaking additions to support full Unicode

new Unicode literal form in strings
new RegExp u mode
new string APIs

What's wrong?

JavaScript handles 4-bytes long characters incorrectly

String.prototype.codePointAt()
to replace String.prototype.charCodeAt()
String.fromCodePoint()
to replace String.fromCharCode()
...

// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
  console.log(c);
}

Modules

Language-level support for modules

import (module) & export

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

ES6 module transpiler

Module Loaders

Dynamic loading
State isolation
Global namespace isolation
Compilation hooks
Nested virtualization

// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

Map + Set + WeakMap + WeakSet

Efficient data structures for common algorithms

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

Proxies

Enable creation of objects with the full range of behaviors available to host objects

debugging
watching data change

// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';

Meta programming with ECMAScript 6 proxies

Symbols

Enable access control for object state

new primitive type

var MyClass = (function() {

  // module scoped symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

  return MyClass;
})();

var c = new MyClass("hello")
c["key"] === undefined

Symbols in ECMAScript 6

Subclassable Built-ins

Built-ins like Array, Date and DOM Elements can be subclassed

// Pseudo-code of Array
class Array {
    constructor(...args) { /* ... */ }
    static [Symbol.create]() {
        // Install special [[DefineOwnProperty]]
        // to magically update 'length'
    }
}

// User code of Array subclass
class MyArray extends Array {
    constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray();
arr[1] = 12;
arr.length == 2

Subclassing builtins in ECMAScript 6

Math + Number + String + Object APIs

Many new library additions

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Binary and Octal Literals

0b111110111 === 503 // true
0o767 === 503 // true

Promises

Enhancing asynchronous programming

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

Reflect API

Exposing the runtime-level meta-operations on objects

What does the Reflect object do in JavaScript?

Tail Calls

Makes recursive algorithms safe in the face of unbounded inputs

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)

ES6 Features

Status

Arrows

Classes

Enhanced Object Literals

Template Strings

Destructuring

Default + Rest + Spread

Let + Const

Iterators + For..Of

Use cases of iterators

`for..of` vs. `for..in` in arrays

Generators

Unicode

What's wrong?

Modules

Module Loaders

Map + Set + WeakMap + WeakSet

Proxies

Symbols

Subclassable Built-ins

Math + Number + String + Object APIs

Binary and Octal Literals

Promises

Reflect API

Tail Calls

References

Q ? A : Thanks

ES6 Features

Status

Arrows

Classes

Enhanced Object Literals

Template Strings

Destructuring

Default + Rest + Spread

Let + Const

Iterators + For..Of

Use cases of iterators

for..of vs. for..in in arrays

Generators

Unicode

What's wrong?

Modules

Module Loaders

Map + Set + WeakMap + WeakSet

Proxies

Symbols

Subclassable Built-ins

Math + Number + String + Object APIs

Binary and Octal Literals

Promises

Reflect API

Tail Calls

References

Q ? A : Thanks

`for..of` vs. `for..in` in arrays