ES2015 and drafts/proposals vs. ES5

es2015.md

ES2015

arrow functions

Before:

[1,2,3,4].filter(function(i) {
	return i % 2 === 0;
});

[1, 0, 1].map(function(i) {
	var result = i * i;
	return result;
});

After:

[1,2,3,4].filter(i => i % 2 === 0);

[1, 0, 1].map(i => {
	var result = i * i;
	return result;
});

block scoping

{
	let x = 5;
	x++;
	x; // x is 5
}
x; // x is undefined

function(x) {
	if(x > 5) {
		let y = x*2;
	}
	return x + y; // y is undefined
}

classes

Before:

var Foo = function() {
	// ...
};

Foo.prototype.myMethod = function() { /* ... */ };
Foo.prototype.anotherMethod = function() { /* ... */ };
Foo.someFactory = function() { /* ... */ };

After:

class Foo {
	constructor() {
		// ...
	}
	myMethod() {
		// ...
	}
	anotherMethod() {
		// ...
	}
	static someFactory() {
		// ...
	}
}

Also, inheritance:

class Foo extends Bar {
	// ...
}

constants

const x = 5;
x = 6; // error

destructuring

var [x, y] = [1, 2]; // x === 1, y === 2

var [x = 1, y = 2] = [3]; // x === 3, y === 2

var x = 1, y = 2;
[y, x] = [x, y]; // y === 1, x === 2

var fn = () => [5, 6];
var [x, y] = fn(); // x === 5, y === 6

var {x, y} = { x: 5, y: 6 }; // x === 5, y === 6

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

for..of

Before:

for(var i in [1, 2, 3]) {
	// ...
}

for(var node in Array.from(document.querySelectorAll('div'))) {
	// ...
}

After:

for(var i of [1, 2, 3]) {
	// ...
}

for(var node of document.querySelectorAll('div')) {
	// ...
}

object literals

Before:

var foo = 'bar';

var obj = {
	foo: foo
	test: function test() {
		return 10;
	}
};
obj['ab' + 'c'] = 5;
obj.prototype = HTMLElement;

After:

var foo = 'bar';

var obj = {
	__proto__: HTMLElement,
	foo,
	test() {
		return 10;
	},
	['ab' + 'c']: 5
};

// obj.foo === 'bar'
// obj.test() === 10
// obj.abc === 5

super

class Foo extends Bar {
	constructor() {
		super();
		// ...
	}
	myMethod() {
		super.myMethod();
		// ...
	}
}

default params

Before:

var fn = function(i) {
	if(i === undefined) {
		i = 5;
	}
	return i;
};

After:

var fn = function(i = 5) {
	return i;
};
fn(); // 5
fn(1); // 1

spread operator

Before:

var fn = function(a, b) { /* ... */ };

fn.apply(null, [1, 2]);

After:

var fn = function(a, b) { /* ... */ };

fn(...[1, 2]); // calls fn(1, 2)

Before:

var a = [1, 2];
var b = a.concat([3]);

After:

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

rest params

Before:

var fn = function() {
	var args = Array.from(args);
	// args === [1, 2, 3]
};
fn(1, 2, 3);

After:

var fn = function(...args) {
	// args === [1, 2, 3]
};
fn(1, 2, 3);

template strings

Before:

var str = 'some\nnew\nlines\n' + foo + '\ntest';

After:

var str = \`some
new
lines
${foo}
test\`;

Drafts/Proposals

function bind

Before:

var f = fn.bind(this);
f();

After:

var f = this::fn;
f();

Before:

var foo = el.on('click', this.handler.bind(this));

After:

var foo = el.on('click', ::this.handler);

object spread

Before:

var foo = { a: 5, b: 6 };
var bar = Object.assign({}, foo, { c: 7 });

After:

var foo = { a: 5, b: 6 };
var bar = { ...foo, c: 7 };
// bar is { a: 5, b: 6, c: 7 }