ES6: the future is now

JSIST 2014
By : Sebastiano Armeli
http://jsist.org

Transcript

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

   View Slide

2. @sebarmeli
   Sebastiano Armeli
   

   View Slide

3. ES6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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]
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. When to use
    ‘function’ ?
    

    View Slide

22. Constructors
    
    Generators
    
    (Methods in object literals)
    
    

    View Slide

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

    View Slide

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
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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’
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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}
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

50. Set
    NO duplicates values
    
    

    View Slide

51. Set
    NO duplicates values
    
    Different types in a set
    
    

    View Slide

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

    View Slide

53. Set
    NO duplicates values
    
    Different types in a set
    
    add(key)/ has(key) / delete(key)
    values() -> Iterator
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

66. WeakMap
    Avoid memory leaks
    
    

    View Slide

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

    View Slide

68. WeakMap
    Avoid memory leaks
    
    Reference to the key obj held weakly
    
    Keys must be an objects
    
    

    View Slide

69. WeakMap
    Avoid memory leaks
    
    Reference to the key obj held weakly
    
    Keys must be an objects
    
    No iterators methods
    
    

    View Slide

70. Object properties
    
    !
    with
    
    !
    Map / WeakMap
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide