Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6: The future is now

ES6: The future is now

Talk given at JsIst (Istanbul, Turkey) - September 2014

Sebastiano Armeli

September 28, 2014
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

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