ECMAScript 6 - part 2

maps, sets, iterators, array comprehension, rest parameters, spread operator

Transcript

1. ecmascript 6
   ~ part deux ~
   www.sayan.ee
   Sunday, 12 May, 13
   

   View Slide

2. es6
   goals
   Sunday, 12 May, 13
   

   View Slide

3. es6
   generators
   complex apps
   libraries
   goals
   Sunday, 12 May, 13
   

   View Slide

4. es6
   modules
   block scoping
   iterators
   spread operator
   maps
   destructuring
   rest params
   sets
   default params
   array comprehension
   classes
   Sunday, 12 May, 13
   

   View Slide

5. modules
   block scoping
   iterators
   spread operator
   maps
   destructuring rest params
   sets
   default params
   array comprehension
   classes
   google
   traceur
   part 1 part 2
   Sunday, 12 May, 13
   

   View Slide

6. iterators
   spread operator
   maps
   rest params
   sets
   array comprehension
   part 2
   Sunday, 12 May, 13
   

   View Slide

7. iterators
   spread operator
   maps
   rest params
   sets
   array comprehension
   part 2
   common
   browser
   engines?
   world’s 1st
   website?
   Sunday, 12 May, 13
   

   View Slide

8. sets
   es6
   a set has unique values!
   Sunday, 12 May, 13
   

   View Slide

9. var engines = new Set();
   sets
   es6
   a set has unique values!
   new
   Sunday, 12 May, 13
   

   View Slide

10. var engines = new Set();
    sets
    es6
    a set has unique values!
    new
    add
    engines.add("Gecko");
    engines.add("Hippo");
    engines.add("Hippo");
    Sunday, 12 May, 13
    

    View Slide

11. var engines = new Set();
    sets
    es6
    a set has unique values!
    new
    add
    has
    engines.add("Gecko");
    engines.add("Hippo");
    engines.add("Hippo");
    console.log( engines.has("Gecko") ); // ??
    console.log( engines.has("Indigo") ); // ??
    console.log( engines.has("Hippo") ); // ??
    Sunday, 12 May, 13
    

    View Slide

12. var engines = new Set();
    sets
    es6
    a set has unique values!
    new
    add
    has
    delete
    engines.add("Gecko");
    engines.add("Hippo");
    engines.add("Hippo");
    console.log( engines.has("Gecko") ); // ??
    console.log( engines.has("Indigo") ); // ??
    console.log( engines.has("Hippo") ); // ??
    engines.delete("Hippo");
    console.log( engines.has("Hippo") ); // ??
    Sunday, 12 May, 13
    

    View Slide

13. maps
    es6
    keys can be any data type
    Sunday, 12 May, 13
    

    View Slide

14. var es6 = new Map();
    maps
    es6
    new
    keys can be any data type
    Sunday, 12 May, 13
    

    View Slide

15. var es6 = new Map();
    maps
    es6
    new
    set
    keys can be any data type
    es6.set("edition", 6); // key is string
    es6.set(262, "standard"); // key is number
    es6.set(undefined, "nah"); // key is undefined
    var hello = function() { console.log("hello"); };
    es6.set(hello, "Hello ES6!"); // key is function
    Sunday, 12 May, 13
    

    View Slide

16. var es6 = new Map();
    maps
    es6
    new
    set
    has
    keys can be any data type
    es6.set("edition", 6); // key is string
    es6.set(262, "standard"); // key is number
    es6.set(undefined, "nah"); // key is undefined
    var hello = function() { console.log("hello"); };
    es6.set(hello, "Hello ES6!"); // key is function
    console.log( es6.has("edition") ); // ??
    console.log( es6.has("years") ); // ??
    console.log( es6.has(undefined) ); // ??
    Sunday, 12 May, 13
    

    View Slide

17. var es6 = new Map();
    maps
    es6
    new
    set
    has
    delete
    keys can be any data type
    es6.set("edition", 6); // key is string
    es6.set(262, "standard"); // key is number
    es6.set(undefined, "nah"); // key is undefined
    var hello = function() { console.log("hello"); };
    es6.set(hello, "Hello ES6!"); // key is function
    console.log( es6.has("edition") ); // ??
    console.log( es6.has("years") ); // ??
    console.log( es6.has(undefined) ); // ??
    es6.delete(undefined);
    console.log( es6.has(undefined) ); // ??
    Sunday, 12 May, 13
    

    View Slide

18. var es6 = new Map();
    maps
    es6
    new
    set
    has
    delete
    get
    keys can be any data type
    es6.set("edition", 6); // key is string
    es6.set(262, "standard"); // key is number
    es6.set(undefined, "nah"); // key is undefined
    var hello = function() { console.log("hello"); };
    es6.set(hello, "Hello ES6!"); // key is function
    console.log( es6.has("edition") ); // ??
    console.log( es6.has("years") ); // ??
    console.log( es6.has(undefined) ); // ??
    es6.delete(undefined);
    console.log( es6.has(undefined) ); // ??
    console.log( es6.get(hello) ); // Hello ES6!
    Sunday, 12 May, 13
    

    View Slide

19. iterator for-of
    es6
    get the values, not keys
    es5
    Sunday, 12 May, 13
    

    View Slide

20. iterator for-of
    es6
    get the values, not keys
    es5
    var planets = ["Mercury",
    "Venus", "Earth", "Mars"];
    for (p in planets) {
    console.log(p); // ??
    }
    for
    in
    Sunday, 12 May, 13
    

    View Slide

21. iterator for-of
    es6
    get the values, not keys
    es5
    var planets = ["Mercury",
    "Venus", "Earth", "Mars"];
    for (p in planets) {
    console.log(p); // ??
    }
    for
    in
    var planets = ["Mercury",
    "Venus", "Earth", "Mars"];
    for (p of planets) {
    console.log(p); // ??
    }
    for
    of
    Sunday, 12 May, 13
    

    View Slide

22. iterator for-of
    es6
    get the values, not keys
    es5
    var planets = ["Mercury",
    "Venus", "Earth", "Mars"];
    for (p in planets) {
    console.log(p); // ??
    }
    for
    in
    var planets = ["Mercury",
    "Venus", "Earth", "Mars"];
    for (p of planets) {
    console.log(p); // ??
    }
    for
    of
    var engines = Set(["Gecko",
    "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
    console.log(e); // ??
    }
    for
    of
    Sunday, 12 May, 13
    

    View Slide

23. array comprehension shorthand
    Sunday, 12 May, 13
    

    View Slide

24. array comprehension shorthand
    es5
    var temperature = [0, 37, 100];
    function degToKelvin(deg) {
    return deg + 273;
    }
    temperature.map(degToKelvin);
    Sunday, 12 May, 13
    

    View Slide

25. array comprehension
    es6
    shorthand
    es5
    var temperature = [0, 37, 100];
    function degToKelvin(deg) {
    return deg + 273;
    }
    temperature.map(degToKelvin);
    var temperature = [0, 37, 100];
    [t + 273 for (t of temperature)]; 1-loop
    Sunday, 12 May, 13
    

    View Slide

26. var suspects = ["Miss Scarlet", "Colonel Mustard"],
    weapons = ["Candlestick", "Dagger"],
    rooms = ["Kitchen", "Ballroom"];
    array comprehension
    es6
    shorthand
    es5
    var temperature = [0, 37, 100];
    function degToKelvin(deg) {
    return deg + 273;
    }
    temperature.map(degToKelvin);
    var temperature = [0, 37, 100];
    [t + 273 for (t of temperature)];
    3-loops
    1-loop
    Sunday, 12 May, 13
    

    View Slide

27. var suspects = ["Miss Scarlet", "Colonel Mustard"],
    weapons = ["Candlestick", "Dagger"],
    rooms = ["Kitchen", "Ballroom"];
    array comprehension
    es6
    shorthand
    es5
    var temperature = [0, 37, 100];
    function degToKelvin(deg) {
    return deg + 273;
    }
    temperature.map(degToKelvin);
    var temperature = [0, 37, 100];
    [t + 273 for (t of temperature)];
    3-loops
    1-loop
    [(console.log(s + " with a " + w + " in the " + r))
    for (s of suspects) for (w of weapons) for (r of rooms)];
    Sunday, 12 May, 13
    

    View Slide

28. rest parameters variable args
    Sunday, 12 May, 13
    

    View Slide

29. rest parameters variable args
    es5
    function push(separator) {
    var result = "";
    for (var i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
    }
    return result;
    }
    console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") );
    Sunday, 12 May, 13
    

    View Slide

30. function push(separator, ...items) {
    var result = "";
    items.forEach(function(item) {
    result += item + separator;
    });
    return result;
    }
    console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") );
    rest parameters
    es6
    variable args
    es5
    function push(separator) {
    var result = "";
    for (var i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
    }
    return result;
    }
    console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") );
    Sunday, 12 May, 13
    

    View Slide

31. function push(separator, ...items) {
    var result = "";
    items.forEach(function(item) {
    result += item + separator;
    });
    return result;
    }
    console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") );
    rest parameters
    es6
    variable args
    es5
    function push(separator) {
    var result = "";
    for (var i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
    }
    return result;
    }
    console.log( push(" ", "Mercury", "Venus", "Earth", "Mars") );
    Sunday, 12 May, 13
    

    View Slide

32. spread operator
    es6
    variable args
    function createURL (comment, path, protocol, subdomain, domain, tld)
    {
    var shoutout = name + ": " + protocol + "://" + subdomain + "."
    + domain + "." + tld + "/" + path;
    console.log( shoutout );
    }
    var weblink = ["hypertext/WWW/TheProject.html", "http", "info",
    "cern", "ch"],
    comment = "World's first Website";
    createURL(comment, ...weblink );
    Sunday, 12 May, 13
    

    View Slide

33. compatibility table
    firefox
    chrome
    Sunday, 12 May, 13
    

    View Slide

34. be updated
    Sunday, 12 May, 13
    

    View Slide

35. start playing!
    google
    traceur
    Sunday, 12 May, 13
    

    View Slide

36. Sunday, 12 May, 13
    

    View Slide