EcmaScript 6 - the future is here

Talk given at JsDay (Verona, Italy) - May 2014

Transcript

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

   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
   2013
   2014
   
   ES 4 again!
   (Adobe, Mozilla,!
   Google)!
   ES 3.1 !
   (Microsoft, Yahoo)!
   beginning
   ES 5 spec finalized
   (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
   

   View Slide

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

   View Slide

7. ES-Harmony Proposal
   ES 6 Candidate
   ECMA-262 Ed.6 standardized
   ES 6 Specification Draft
   TC39 Process
   Strawman
   Proposal
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

20. When to use
    ‘function’ ?
    

    View Slide

21. Constructors
    
    Generators
    
    Methods in obj
    
    

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. Generators & Iteration
    
    Summary
    Functions
    
    Collections
    
    Modularity
    
    Scoping
    
    API improvements
    
    Proxies
    
    

    View Slide

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

    View Slide

71. 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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide