1. ECMAScript 6
Drama in 5 acts
Piotr Lewandowski
20.03.2015

2. All temporary solutions
become final
Act 1 - Preludium

3. ES 4

4. ES 4
ES 6

5. ES 4
ES 6
ES 2015

6. Make JavaScript better
for complex application
for libraries
as target of code generators

7. Pave the Cowpaths
and don't break the web

9. Modules
Act 2

10. Design goals
Compact syntax
Support cyclic dependencies
Asynchronous loading
Configurable

11. Design goals
Compact syntax
Support cyclic dependencies
Asynchronous loading
Configurable
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
math.sum(22, 20); // 42

12. // Default exports and named exports
import myLib from 'src/mylib';
import { function1, function2 } from 'src/mylib';
Importing

13. // Default exports and named exports
import myLib from 'src/mylib';
import { function1, function2 } from 'src/mylib';
Importing
// Renaming: import named1 as myNamed1
import { function1 as fn, function2 } from 'src/mylib';

14. // Default exports and named exports
import myLib from 'src/mylib';
import { function1, function2 } from 'src/mylib';
Importing
// Renaming: import named1 as myNamed1
import { function1 as fn, function2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';

15. // Default exports and named exports
import myLib from 'src/mylib';
import { function1, function2 } from 'src/mylib';
Importing
// Renaming: import named1 as myNamed1
import { function1 as fn, function2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
// Only load the module, don’t import anything
import 'src/mylib';

16. Syntax
Act 3

17. Object {} enhancement
let firstName = 'Joe';
let lastName = 'Doe';
let person = {
firstName,
['last' + 'Name']: lastName,
getAge() {
return 42;
}
};
person.firstName // Joe
person.lastName // Doe
person.getAge() // 42
var firstName = 'Joe';
var lastName = 'Doe';
var person = {
firstName: firstName,
getAge: function() {
return 42;
}
};
person['last' + 'Name'] = lastName;
person.firstName // Joe
person.lastName // Doe
person.getAge() // 42
ES6 ES5

18. Destructuring
let [a, , b] = [1, 2, 3];

19. Destructuring
let [a, , b] = [1, 2, 3];
[a, b] = [b, a]

20. let person = {
firstName: 'Joe',
lastName: 'Doe'.
age: 42
};
let { firstName, lastName } = person;
firstName // Joe
lastName // Doe
Destructuring
let [a, , b] = [1, 2, 3];
[a, b] = [b, a]

21. Spread operator
Math.max(...[1, 2, 3]);
// the same as
Math.max(1, 2, 3);

22. Spread operator
Math.max(...[1, 2, 3]);
// the same as
Math.max(1, 2, 3);
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

23. Spread operator
Math.max(...[1, 2, 3]);
// the same as
Math.max(1, 2, 3);
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
[head, ...tail] = [1, 2, 3, 4, 5];

24. Scope - let & const
function foo() {
a = 1;
if (a) {
var a;
let b = a + 2;

25. Scope - let & const
function foo() {
a = 1;
if (a) {
var a;
let b = a + 2;
console.log( b );
}
console.log( a );
console.log( b );
}

26. Scope - let & const
function foo() {
a = 1;
if (a) {
var a;
let b = a + 2;
console.log( b );
}
console.log( a );
console.log( b );
}
console.log( b ); // 3
}
console.log( a ); // 1
console.log( b ); // ReferenceError: `b` is not defined
}
function foo() {
a = 1; // careful, `a` has been hoisted!
if (a) {
var a; // hoisted to function scope!
let b = a + 2; // `b` block-scoped to `if` block!

27. Scope - let & const
function foo() {
a = 1;
if (a) {
var a;
let b = a + 2;
console.log( b );
}
console.log( a );
console.log( b );
}
console.log( b ); // 3
}
console.log( a ); // 1
console.log( b ); // ReferenceError: `b` is not defined
}
function foo() {
a = 1; // careful, `a` has been hoisted!
if (a) {
var a; // hoisted to function scope!
let b = a + 2; // `b` block-scoped to `if` block!
if (true) {
const foo = "foo";
// error
foo = "bar";
}

28. Functions
Act 4

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

30. Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}

31. Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}
let cp = new ColorPoint(25, 8, 'green');
cp.toString(); // '(25, 8) in green'
console.log(cp instanceof ColorPoint); // true
console.log(cp instanceof Point); // true
console.log(typeof Point); // function

32. Arrow functions
(x, y) => x + y

33. Lexical scope
class Person {
constructor() {
this.name = 'Joe';
}
// ...
load() {
xhrGet(data => {
this.name = data.name;
});
}
}
function Person {
this.name = 'Joe';
// ...
this.load = function() {
var that = this;
xhrGet(function(data) {
that.name = data.name;
});
}
}

34. Lexical scope
vs
document.body.addEventListener('click', function(event) {
console.log(event, this) // EventObject, BodyElement
});
document.body.addEventListener('click', event =>
console.log(event, this) // EventObject, WindowElement
);

35. Default parameters
function add(x = 0, y = 0) {
return x + y;
}
function add(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}
ES6
ES5

36. Rest parameter
function friends(...friends) {
friends.forEach(friend => {
// ...
}
}
function friends() {
var friends = [].slice.call(arguments, 1);
friends.forEach(function(friend) {
// ...
}
}
ES6
ES5

37. Can I use it?
Act 5 - Final

38. Compilators
TypeScript
Traceur
Babel

39. Compilators
TypeScript
Traceur
Babel
for back-end
Babel-node for node.js
io.js - fork of node.js

40. Stay tuned
and check
compatibility table
http://kangax.github.io/compat-table/es6/

42. Further reading
2ality.com
kangax ES6 compatibility table
babeljs.io/docs/learn-es6