ES6: The future is now

Transcript

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

2. @sebarmeli Sebastiano Armeli

3. ES6

4. 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

5. History 2005 2007 2008 2009 2011 2014 2015 ES 4

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

6. ECMA-262 TC39 ES 4 ES-Harmony ES.Next ES 6 ECMA ES

   7 es-discuss

7. Iteration & Generators Summary Arrow Functions Collections Modularity / Classes

   / Templates Scoping / Destructing / Parameters API improvements Proxies

8. Iteration & Generators Summary Collections Modularity / Classes / Templates

   Scoping / Destructing / Parameters API improvements Proxies Arrow Functions

9. (Fat) arrow function var y = (x) => x +

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

10. (Fat) arrow function var y = function(x) { return x

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

11. (Fat) arrow function var y = function(x) { return x

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

12. (Fat) arrow function var y = function(x) { return x

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

13. var y = (x) => {return x + 1} var

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

14. var y = (x) => {return x + 1} var

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

15. 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]

16. var obj = { doIt: function(){}, handle: function(){ var that

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

17. var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, function(e)

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

18. var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, (e)

    => this.doIt()); } } ES6

19. Object.getPrototypeOf(() => {})

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

21. When to use ‘function’ ?

22. Constructors Generators (Methods in object literals)

23. Summary Arrow Functions Collections API improvements Proxies Scoping / Destructing

    / Parameters Iteration & Generators Modularity / Classes / Templates

24. 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

25. var vs let (function() { console.log(y) // “undefined” if (true)

    { var y = “value”; } console.log(y) // “value” }());

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

27. const (function() { const X; X = “foo”; // ERROR:

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

28. Block functions if (true) { function fn () {} }

    ! fn(); // ERROR!

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

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

30. 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

31. Multiple return value var fn = function(){ return [“50”, “100”];

    } ! var [width, height] = fn(); ! console.log(width); //50 console.log(height); //100

32. var fn = function(){ return { foo: “bar”, fizz: “buzz”

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

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

    }

34. function(foo) { foo = foo || “a”; } function(foo =

    “a”) {} Parameter default values

35. 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

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

    { console.log(arg); }); } ! fn(“a”, “b”, “c”); ! // b // c

37. Spread operator function fn(a, b, c) {} ! var array

    = [“A”, “B”, “C”]; fn.apply(null, array);

38. function fn(a, b, c) {} ! var array = [“A”,

    “B”, “C”]; fn.apply(null, array); fn(…array); Spread operator

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

    “Seb Named parameters

40. Iteration & Generators Summary Collections API improvements Proxies Arrow Functions

    Scoping / Destructing / Parameters Modularity / Classes / Templates

41. for-of for-of loop on ‘iterables’ and iterators Arrays/Sets/Maps are ’iterables’

    for-in limitations

42. for-of var array = [“a”, “b”, “c”]; ! for (let

    el of array) { console.log(el); } ! // “a” // “b” // “c”

43. Iterable { @@iterator: function() -> iterator } { next: function()

    -> any } Iterators

44. Iterator var array = [“a”, “b”, “c”]; ! array.entries() //

    Array Iterator array.keys() // Array Iterator Iterator from Array, Map, Set

45. 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}

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

47. ! 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

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

    iterables

49. Iteration & Generators Summary Collections API improvements Proxies Arrow Functions

    Scoping / Destructing / Parameters Modularity / Classes / Templates

50. Set NO duplicates values

51. Set NO duplicates values Different types in a set

52. Set NO duplicates values Different types in a set add(key)/

    has(key) / delete(key)

53. Set NO duplicates values Different types in a set add(key)/

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

54. let countries = new Set(); countries.add(“US”); countries.add(“Italy”); countries.add(“US”); ! countries

    // Set [“US”, “Italy”]

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

    “Italy”] ! ! ! countries.delete(“Italy”); countries // Set [“US”]

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

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

57. Map {“foo” : “bar” }

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

59. Map {“foo” : “bar” } Keys can be objects get(key);

    has(key); set(key,val)

60. Map {“foo” : “bar” } get(key); has(key); set(key,val) delete(key); clear();

    forEach(); Keys can be objects

61. let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !

    dict // Map {“A”: 1, “B”: 2}

62. 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”);

63. 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

64. 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] ! });

65. dict.forEach(function(val, key, map) { ! console.log(val); // x // y

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

66. WeakMap Avoid memory leaks

67. WeakMap Avoid memory leaks Reference to the key obj held

    weakly

68. WeakMap Avoid memory leaks Reference to the key obj held

    weakly Keys must be an objects

69. WeakMap Avoid memory leaks Reference to the key obj held

    weakly Keys must be an objects No iterators methods

70. Object properties ! with ! Map / WeakMap

71. Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing

    / Parameters Iteration & Generators Modularity / Classes / Templates

72. Object Literal ! let obj = { ! __proto__: parentObj,

    meth1(a,b) { ! } ! };

73. Module ! export function register(ad) { return ad; } !

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

74. export default class {}; // Ad.js import Ad from ‘ad';

    // app.'s ! ! import { meth as method } from ‘a’;

75. Class ! class Animal { constructor(name) { this.name = name;

    } toString() { return “This is: ” + this.name; } }

76. Subclass - super ! class Cat extends Animal { constructor(name,

    ownerName) { super(name); this.ownerName = ownerName; } ! toString() { return super() + “ owned by ” + this.ownerName; } }

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

78. ! 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() { var super = Animal.prototype.toString.call(this); return super + “ owned by ” + this.ownerName; };

79. Template strings var a = “hello”; var b = “world”;

    ! `${a} ${b}!`

80. Template strings var a = “hello”; var b = “world”;

    ! `${a} ${b}!` var multiline = `Hello world !!!`;

81. Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing

    / Parameters Iteration & Generators Modularity / Classes / Templates

82. String methods String.prototype.startsWith(str) => boolean String.prototype.endsWith(str) => boolean String.prototype.contains(str) =>

    boolean String.prototype.repeat(num) => string

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

    boolean …

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

    Array Array.prototype.keys => Iterator Array.prototype.values => Iterator

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

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

86. var array = [“a”, “b”, “c”]; ! for (let [index,

    el] of array.entries()) { console.log(index, el); // 0 “a” // 1 “b” // 2 “c” } ! for (let index of array.keys()) { console.log(index); } ! for (let el of array.values()) { console.log(el); } !

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

88. Math methods Math.log2(num) => num Math.log10(num) => num Math.sinh(num) =>

    num Math.cosh(num) => num …

89. Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing

    / Parameters Iteration & Generators Modularity / Classes / Templates

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

91. 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

92. 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/ Proxies

93. Iteration & Generators Recap Arrow Functions Collections Scoping / Destructing

    / Parameters API improvements Proxies Modularity / Classes / Templates

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

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

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