EcmaScript 6 - The future is here

Sebastiano Armeli
@sebarmeli
http://courtreportingnyc.com/wp-content/uploads/2013/10/future-of-court-reporting.jpg

History
1995

1996

1997

1998

1999

2000

2003

(May) B. Eich invented Mocha
(Dec) LiveScript renamed to JavaScript
JSScript
(June) ECMA-262 Ed.1!
! by TC39 committee
ECMA-262 Ed.2
ECMA-262 Ed.3
ECMA-262 Ed.4 started
ECMA-262 Ed.4 abandoned
(Sep) Mocha renamed to LiveScript

History
2005

2007

2008

2009

2011

2013

2014

ES 4 again!
(Adobe, Mozilla,!
Google)!
ES 3.1 !
(Microsoft, Yahoo)!
beginning
ES 5 spec ﬁnalized
(June) ECMA-262 Ed.5
(June) ES 6
proposals freeze
(Dec) ECMA-262 Ed.6 target release
(27th April) latest spec draft
(July) Agreement: ES3.1 & ES-Harmony!
!
ES3.1 becomes ES5

ECMA-262
TC39
ES 4
ES-Harmony
ES.Next
ES 6
ECMA
ES 7
es-discuss

ES-Harmony Proposal
ES 6 Candidate
ECMA-262 Ed.6 standardized
ES 6 Speciﬁcation Draft
TC39 Process
Strawman
Proposal

Generators & Iteration

Summary
Functions

Collections

Modularity

Scoping / Calling

API improvements

Proxies

(Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5

(Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5
No constructor

Syntax sugar

Lexical `this` binding

let x = (x) =>
{return x + 1}
var x = function(x) {
return x + 1;
}
let x = (x, y) =>
({
x: x,
y: y
})
var x = function(x, y) {
return {
x: x,
y: y
};
}
ES6 ES5

let map = words =>
words.map((w) => w.length);
var map = function(words) {
return words.map(function(w) {
return w.length;
}
}
ES6
ES5
map([‘sea’, ‘beach’, ‘do’]); // [3,5,2]

var obj = {
doIt: function(){},
handle: function(){
document.addEventListener(‘click’,
(e) => this.doIt());
}
}
ES6

Object.getPrototypeOf(() => {})

Object.getPrototypeOf(() => {})
Function.prototype

Constructors

Generators

Methods in obj


Summary
Functions

Collections

Modularity

Scoping & Calling

API improvements

Proxies

Block Scoping
Each BLOCK has got its lexical environment

let/const bind variables to the lexical environment

Variables declared with let/const are NOT hoisted

var vs let
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());

var vs let
(function() {
if (true) {
let y = “value”;
}
console.log(y) // ERROR!!
}());
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());

const
(function() {
const X;
X = “foo”; // ERROR: x unitialized
}());
(function() {
const X = “foo”;
X = “foo2”; // ERROR: x is read-only
}());

Block functions
if (true) {
function fn () {}
}
!
fn(); // ERROR!

Destructing array
var [x,y] = [‘a’, ‘b’];
!
console.log(x); // ‘a’
!
console.log(y); // ‘b’
!
!
var [x,y] = [y, x];
!
console.log(x); // ‘b’

Destructing object
var obj = {width: 50, height: 100};
!
var {width, height} = obj;
!
console.log(width); // 50

Destructing
multiple return value
var fn = function(){
return [“50”, “100”];
}
!
var [width, height] = fn();
!
console.log(width); //50
console.log(height); //100

Default values
function(foo) {
foo = foo || “a”;
}

Default values
function(foo) {
foo = foo || “a”;
}
function(foo = “a”) {}

function fn(…args) {
console.log(args); //[“a”, “b”, “c”]
args.forEach(function(arg) {
console.log(arg);
};
}
!
fn(“a”, “b”, “c”);
!
// a
// b
// c
Rest parameters

Rest parameters
function fn(a, …args) {
console.log(args); //[“b”, “c”]
args.forEach(function(arg) {
console.log(arg);
};
}
!
fn(“a”, “b”, “c”);
!
// b
// c

Spread operator
function fn(a, b, c) {}
!
var array = [“A”, “B”, “C”];
fn.apply(null, array);

function fn(a, b, c) {}
!
var array = [“A”, “B”, “C”];
fn.apply(null, array);
fn(…array);
Spread operator

function fn(a, b, c) {
var array = Array.prototype.
slice.apply(arguments);
}
Spread operator

function fn(a, b, c) {
var array = Array.prototype.
slice.apply(arguments);
var array = […arguments];
}
Spread operator

for-of
for-of loop on ‘iterables’

Arrays/Sets/Maps are ’iterables’

for-in limitations

Iterable
{ iterator: function() -> iterator }
{ next: function() -> any }
Iterators

for-of
var array = [“a”, “b”, “c”];
!
for (let el of array) {
console.log(el);
}
!
// “a”
// “b”
// “c”

Array comprehension
var array = [1, 2, 11, 20];
!
var array_c = [x (for x of
array) (if x > 10)];
!
// [11, 20]

function* g() {
yield “a”;
yield “b”;
}
Generator
var generator = g();
generator ‘constructor’

generator.next(); //{ value: “a”, done: false}
generator.next(); //{ value: “b”, done: false}
generator.next(); //{ value: undefined,
done: true}

!
function* g() {
yield “a”;
var retVal = yield “b”;
return retVal;
}
var generator = g();
generator.next().value; //“a”
generator.next().value; //“b”
generator.next(“c”).value; //“c”

!
function* asyncFn() {
var data = yield getUser();
doSomethingElse(data);
}
function run(genFunction) {
var generator = genFunction();
generator.next().value.then(function(val){
generator.next(val);
}, function(err) {
generator.throw(err);
});
}
run(asyncFn);
Promise

for (let el of generator) {
console.log(el);
}
Generators are iterables

Set
Set of values - NO duplicates

Different type of values

add(key)/ has(key) / delete(key)
entries() -> Iterator

let countries = new Set();
countries.add(“US”);
countries.add(“Italy”);
countries.add(“US”);
!
countries.values().next().value;
// “US”
!
countries.values().next().value;
// “Italy”
!
for(let country of countries) {
console.log(country);
}

Map
key-value

Different type of values

Object can be keys

get(key)/ has(key) / set(key,val)

let dict = new Map();
dict.set(“A”, 1);
dict.set(“B”, 2);
!
dict.get(“A”); // “1”
dict.delete(“B”);
!
for(let w of dict.keys()) {
console.log(w); // “A”
}
!
for(let w of dict.values()) {
console.log(w); // “A”
}

WeakMap
Avoid memory leaks

Reference to the key obj held weakly

Key must be an object

No iterators methods

Module
!
module “ads” {
export function register(ad) {
return ad;
}
}
!
import {register} from “ads”;
var app = {
doIt: function() {
register({});
}
}
export app;
app.js
lib/ads.js

!
module “widget” {…}
module “widget/button” {…}
module “widget/text” {…}
!
!
import ‘lib/ad’ as c;
import { meth as method } from ‘a';
!
!
export default class {}; // Ad.js
import Ad from ‘ad'; // app.js

Loader API
System.load('http://json.org/modules/json2.js',
function(JSON) {
alert(JSON.stringify([0, {a: true}]));
});
System.import
Conﬁgure module loading

Class / Subclass!
class Animal {
constructor(name) {
this.name = name;
}
toString() {
return “This is: ” + this.name;
}
}
class Cat extends Animal {
constructor(name, ownerName) {
super.constructor(name);
this.ownerName = ownerName;
}
!
toString() {
return super.toString() + “ owned by ” +
this.ownerName;
}
}

!
function Animal(name) {
this.name = name;
}
!
Animal.prototype.toString = function() {
return “This is: ” + this.name;
};
!
function Cat(name, ownerName) {
Animal.call(this, name);
this.ownerName = ownerName;
}
!
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.parent = Animal;
!
Cat.prototype.toString = function() {
return Animal.prototype.toString.call(this) + “ owned by ”
+ this.ownerName;
}

String methods
startsWith()
endsWith()
contains()
…

Number methods
Number.isInteger(num)
Number.isNaN(num)
Number.isFinite(num)
…

Array methods
var divs = document.querySelectorAll("div");
Array.from(divs);
!
// [<div></div>, </div></div>]
!
Array.of(10, 11);
!
// [10, 11]
!
!

Object methods
Object.setPrototypeOf(obj, proto)
Object.assign(obj, mixin)
Object.is(value1, value2)

var object = {
method() {
return “a”;
}
}
object.method(); // “a”
!

var object = {
method() {
return “a”;
}
}
object.method(); // “a”
!
function f(x, y) { return {x: x, y: y};}
function f(x, y) { return {x, y}; }
=

Math methods
Math.log2()
Math.log10()
Math.sinh()
Math.cosh()
…


Summary
Functions

Collections

Modularity

Scoping

API improvements

Proxies

Proxies
var obj = {num: 1};
!
obj = Proxy(obj, {
set: function (target, property, value) {
target[property] = value + 1;
}
});
!
obj.num = 2 // [[Set]]
console.log(obj.num); // 3

Proxies
function createDefensiveObject(target) {
return new Proxy(target, {
get: function(target, property) {
if (property in target) {
return target[property];
} else {
throw new ReferenceError();
}
}
});
}
!
var obj = createDefensiveObject({name: “Seb”});
console.log(obj.lastname); //ReferenceError
http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/


Recap
Functions

Collections

Modularity

Scoping / Calling

API improvements

Proxies

Promises

Symbols

Generator Expressions

Quasi-literals (template-strings)

Tools
Traceur compiler (Google)

es6-transpiler

es6-module-transpiler (Square)

es6-shim

defs.js

http://wiki.ecmascript.org/doku.php
https://people.mozilla.org/~jorendorff/es6-draft.html
http://kangax.github.io/compat-table/es6/
http://esdiscuss.org/
@sebarmeli
Sebastiano Armeli

EcmaScript 6 - The future is here

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to EcmaScript 6 - The future is here (20)

More from Sebastiano Armeli (10)

Recently uploaded (20)

EcmaScript 6 - The future is here