ECMAScript 6

ECMAScript 6
Drama in 5 acts
Piotr Lewandowski
20.03.2015

All temporary solutions
become final
Act 1 - Preludium

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

Pave the Cowpaths
and don't break the web

Design goals
Compact syntax
Support cyclic dependencies
Asynchronous loading
Configurable

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

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

Importing
// Renaming: import named1 as myNamed1
import { function1 as fn, function2 } from 'src/mylib';

Importing
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';

Importing
// 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';

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

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

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

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]

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

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);

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];

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

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

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!

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";
}

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

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

Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
}
}
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

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

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;
});
}
}

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
);

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

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

Compilators
TypeScript
Traceur
Babel

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

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

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

ECMAScript 6

More Related Content

What's hot (20)

Similar to ECMAScript 6 (20)

Recently uploaded (8)

ECMAScript 6