ES6 is coming to get you

don’t run away! :-)

Resources

TC39 Meetings: https://github.com/rwaldron/tc39-notes
Draft Spec: http://people.mozilla.org/~jorendorff/es6-draft.html
Support Table: http://kangax.github.io/es5-compat-table/es6/
Feature overview (kind of what I give here): https://github.com/lukehoban/es6features

Features

Syntax
Semantics
Builtins

Property shorthands

var a;
var o = {
  // shorthand properties
  a,
  // shorthand methods
  b() {},
  // computed properties
  [c + c + d()]: 1
};
// the same as:
o = {
  a: a,
  b: function () {}
};
o[c + c + d()] = 1;

* Shorthand properties implemented by yours truly in FF 33 :-)

* I use them in production code (via a transpiler)

OOP?

// Why the fuck does everyone re-implement the wheel?

App.Person = Ember.Object.extend({
  init: function() {
    var name = this.get('name');
  }
});

var Library = Backbone.Model.extend({
  constructor: function() {
    this.books = new Books();
    Backbone.Model.apply(this, arguments);
  }
});

define(["dojo/_base/declare"], function(declare){
  return declare(null, {
    constructor: function(name, age, residence){
      this.name = name;
      this.age = age;
      this.residence = residence;
    }
  });
});

In case noone told you:

JS is, and always was OO
You have classes and inheritance
But apparently people don’t understand it if you don’t define a "class"

Native classes

// this is PURELY syntax. There is absolutely no new semantics in the language

class A extends B {
    constructor() {
        super();
        this.a = 10;
    }

    method() {
        return super.method();
    }
}

Seriously, just learn what the prototype is and how to use OO in pure JS…

Arrow Functions

var a = b => c;
// is the same as:
var a = function (b) { return c; };

// lexical `this`

this.list.map(item => this.foo(item));

I use arrow functions in production code (via a transpiler)

new Builtins

Array.from(arrayLike) as a better [].slice.call()
Native Promises
Map
WeakMap
Set
WeakSet

Semantics: Iterators

for (var i in ["foo", "bar"]) {
    // i = "0"
}

// new for-of iteration:
for (var i of ["foo", "bar"]) {
    // i = "foo"
}

// generators are iterators
function* iter123() {
    yield 1;
    yield 2;
    yield 3;
}

Destructuring

var [a, b, c = 10, ...d] = arr;
a === arr[0];
b === arr[1];
c === arr[2] || 10;
d === arr.slice(3);
// BUT: works with iterators!

var {a = 10, prop: local = 10} = obj;
a === obj.a || 10;
local === obj.prop || 10;

After ~3 month of reviews and revisions, your truely has finally landed destructurin rest (and rewrite to iterators) in FF 34 https://bugzilla.mozilla.org/show_bug.cgi?id=933276

Defaults are coming too, but there is a lot to do: https://bugzilla.mozilla.org/show_bug.cgi?id=932080

Block scoping

let a  = 10;
{
    let a = 20;
    a === 20;
}
a === 10;

for (let elem of list) {
    // `elem` is a new binding all the time. You can use it in closures!
}

Symbols, aka private props

// a Symbol is a unique non-string property key
// is guaranteed to not collide with other properties
var privprop = Symbol();

function Foo() {
    this[privprop] = "private!";
}

// you need the original symbol to reference the private.
// Of course you might want to expose it :-)


// There are well known symbols for example for the new iterator protocol

var o = {
    [Symbol.iterator]: function () {…}
};
for (let el of o) {}

Native Modules

// Syntax to import modules and export definitions

import foo from 'foobar';
// for
export default {some: 'expression'};


import {a, b, c} from 'foobar';
// for
export var a = 10;
export function b() {};

var c = 10;
export {c};

Using it in production via normalize.

Seems like they were postponed to ES7.

Static import via Syntax, dynamic import via Loader (as Promise)

And a lot more

I’ve only scratched the surface
Go and take a look at the links in the first few slides
Things not mentioned:
Template Strings
Proxies