EcmaScript 6 - the future is here

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@sebarmeli Sebastiano Armeli

Slide 3

Slide 3 text

ES6

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 9

Slide 9 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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]

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Object.getPrototypeOf(() => {})

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

When to use ‘function’ ?

Slide 21

Slide 21 text

Constructors Generators Methods in obj

Slide 22

Slide 22 text

Generators & Iteration Summary Functions Collections Modularity Scoping & Calling API improvements Proxies

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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}

Slide 45

Slide 45 text

! 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”

Slide 46

Slide 46 text

! 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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 49

Slide 49 text

Set Set of values - NO duplicates Different type of values add(key)/ has(key) / delete(key) entries() -> Iterator

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Map key-value Different type of values Object can be keys get(key)/ has(key) / set(key,val)

Slide 52

Slide 52 text

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” // “B” } ! for(let w of dict.values()) { console.log(w); // 1 // 2 }

Slide 53

Slide 53 text

WeakMap Avoid memory leaks Reference to the key obj held weakly Key must be an object No iterators methods

Slide 54

Slide 54 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

! 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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Generators & Iteration Summary Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Array methods var divs = document.querySelectorAll("div"); Array.from(divs); ! // [

, ] ! Array.of(10, 11); ! // [10, 11] ! !

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Generators & Iteration Summary Functions Collections Modularity Scoping API improvements Proxies

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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/

Slide 72

Slide 72 text

Generators & Iteration Recap Functions Collections Modularity Scoping / Calling API improvements Proxies

Slide 73

Slide 73 text

Promises Symbols Generator Expressions Quasi-literals (template-strings)

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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