ES6: The future is now

Sebastiano Armeli
@sebarmeli
http://html5hub.com/wp-content/uploads/2013/11/es6-hiway-sign.png

History
1995
1996
1997
1998
1999
2000
2003
JSScript
ECMA-262 Ed.2
(June) ECMA-262 Ed.1!
! by TC39 committee
(May) B. Eich invented Mocha
(Dec) LiveScript renamed to JavaScript
ECMA-262 Ed.4 started
ECMA-262 Ed.3
ECMA-262 Ed.4 abandoned
(Sep) Mocha renamed to LiveScript

History
2005
2007
2008
2009
2011
2014
2015
ES 3.1 !
(Microsoft, Yahoo)!
beginning
ES 4 again!
(Adobe, Mozilla,!
Google)!
ES 5 spec finalized
(Dec) ES 6 spec
completion
(June) ECMA-262 Ed.5
(Mar) Start publication!
(Jun) ECMA-262 Ed.6 !
target release
(July) Agreement:!
ES3.1 & ES-Harmony!
!
ES3.1 becomes ES5

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

Summary
Arrow Functions
Scoping / Destructing / Parameters
Iteration & Generators
Collections
Modularity / Classes / Templates
API improvements
Proxies

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

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

ES6 ES5
return x + 1;
}
var y = (x) => x + 1
Syntax sugar
Lexical `this` binding

ES6 ES5
return x + 1;
}
var y = (x) => x + 1
Syntax sugar
Lexical `this` binding
No constructor

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

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

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

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

var obj = {
doIt: function(){},
handle: function(){
this.doIt();
}.bind(this));
}
}
ES5
var obj = {
doIt: function(){},
handle: function(){
var that = this;
that.doIt();
});
}
}
ES3

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

Object.getPrototypeOf(() => {})

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

Constructors
Generators
(Methods in object literals)

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() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());
(function() {
if (true) {
let y = “value”;
}
console.log(y) // ERROR!!
}());

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: w, height: h} = obj;
var {width, height} = obj;
!
!
console.log(width); // 50
console.log(w); // 50
console.log(height); // 100
console.log(h); // 100

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

var fn = function(){
return {
foo: “bar”,
fizz: “buzz”
}
}
!
var {foo, fizz} = fn();
!
console.log(foo); //“bar”
console.log(fizz); //“buzz”

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

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

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

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

Named parameters
function fn({id, name}) {
console.log(name);
}
!
fn({name: “Seb”}); // “Seb

for-of
for-in limitations
for-of loop on ‘iterables’ and iterators
Arrays/Sets/Maps are ’iterables’

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

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

Iterator
Iterator from Array, Map, Set
var array = [“a”, “b”, “c”];
!
array.entries() // Array Iterator
array.keys() // Array Iterator

Generator
function* g() {
yield “a”;
yield “b”;
}
generator ‘constructor’
var generator = g();
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

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

Set
NO duplicates values
Different types in a set

Set
add(key)/ has(key) / delete(key)

Set
add(key)/ has(key) / delete(key)
values() -> Iterator

let countries = new Set();
countries.add(“US”);
countries.add(“Italy”);
countries.add(“US”);
!
countries // Set [“US”, “Italy”]

let countries = new Set([“US”, “Italy”]);
countries // Set [“US”, “Italy”]
!
!
!
countries.delete(“Italy”);
countries // Set [“US”]

!
for(let country of countries.values()) {
console.log(country); // “US”
}
!
for(let country of countries) {
console.log(country); // “US”
}

Map
{“foo” : “bar” }
Keys can be objects

Map
{“foo” : “bar” }
Keys can be objects
get(key); has(key); set(key,val)

Map
{“foo” : “bar” }
Keys can be objects
get(key); has(key); set(key,val)
delete(key); clear(); forEach();

let dict = new Map();
dict.set(“A”, 1); dict.set(“B”, 2);
!
dict // Map {“A”: 1, “B”: 2}

let dict = new Map();
dict.set(“A”, 1); dict.set(“B”, 2);
!
dict // Map {“A”: 1, “B”: 2}
!
dict.get(“A”); // “1”
dict.delete(“B”);

for(let w of dict.keys()) { // Map Iterator
console.log(w); // “A”
}
!
for(let w of dict.values()) { // Map Iterator
console.log(w); // 1
}
!
dict.clear();
dict.size; // 0

let dict = new Map([[“x”, 1], [“y”, 2]]);
!
!
dict; // Map {x: 1, y: 2}
!
!
!
for(let w of dict) {
!
console.log(w); // [“x”, 1] // [“y”, 2]
!
});

dict.forEach(function(val, key, map) {
!
console.log(val); // x // y
!
console.log(key); // 1 // 2
!
console.log(map); // Map { x: 1, y: 2}
!
});

WeakMap
Avoid memory leaks
Reference to the key obj held weakly

WeakMap
Avoid memory leaks
Keys must be an objects

WeakMap
Avoid memory leaks
Keys must be an objects
No iterators methods

Object properties
!
with
!
Map / WeakMap

Object Literal
!
let obj = {
!
__proto__: parentObj,
meth1(a,b) {
!
}
!
};

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

export default class {}; // Ad.js
import Ad from ‘ad'; // app.'s
!
!
import { meth as method } from ‘a’;

Class
!
class Animal {
constructor(name) {
this.name = name;
}
toString() {
return “This is: ” + this.name;
}
}

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

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

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

Template strings
var a = “hello”;
var b = “world”;
!
`${a} ${b}!`

Template strings
var a = “hello”;
var b = “world”;
!
`${a} ${b}!`
var multiline = `Hello
world
!!!`;

String methods
String.prototype.startsWith(str)
=> boolean
String.prototype.endsWith(str)
=> boolean
String.prototype.contains(str)
=> boolean
String.prototype.repeat(num)
=> string

Number methods
Number.isInteger(num) => boolean
Number.isNaN(num) => boolean
Number.isFinite(num) => boolean
…

Array methods
Array.from(obj) => Array
Array.of(…args) => Array
Array.prototype.entries => Iterator
Array.prototype.keys => Iterator
Array.prototype.values => Iterator

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)

Math methods
Math.log2(num) => num
Math.log10(num) => num
Math.sinh(num) => num
Math.cosh(num) => num
…

Proxies
Proxy(targetObject, interceptors)
!
Meta-programming
Different use cases (logging, mocking)

Proxies
var obj = {num: 1};
!
obj = new 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
Arrow Functions
Scoping / Destructing / Parameters
Iteration & Generators
Collections
Modularity / Classes / Templates
API improvements
Proxies

Other Features..
Promises
Better Unicode support
Optimized tail calls
Symbols

ES6 today
Traceur compiler (Google)
es6-transpiler
es6-module-transpiler (Square)
defs.js
es6-shim

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

ES6: The future is now

More Related Content

What's hot

Viewers also liked

Similar to ES6: The future is now

More from Sebastiano Armeli

Recently uploaded

ES6: The future is now