$30 off During Our Annual Pro Sale. View Details »

ECMAScript 6 - part 2

Sayanee
May 06, 2013
240

ECMAScript 6 - part 2

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

Sayanee

May 06, 2013
Tweet

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