ECMAScript 6 - part 2

83f7b66c4dee7effbb3717027f99282b?s=47 Sayanee
May 06, 2013
190

ECMAScript 6 - part 2

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

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

May 06, 2013
Tweet

Transcript

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

    13
  2. es6 goals Sunday, 12 May, 13

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

  4. es6 modules block scoping iterators spread operator maps destructuring rest

    params sets default params array comprehension classes Sunday, 12 May, 13
  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
  6. iterators spread operator maps rest params sets array comprehension part

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

    2 common browser engines? world’s 1st website? Sunday, 12 May, 13
  8. sets es6 a set has unique values! Sunday, 12 May,

    13
  9. var engines = new Set(); sets es6 a set has

    unique values! new Sunday, 12 May, 13
  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
  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
  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
  13. maps es6 keys can be any data type Sunday, 12

    May, 13
  14. var es6 = new Map(); maps es6 new keys can

    be any data type Sunday, 12 May, 13
  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
  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
  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
  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
  19. iterator for-of es6 get the values, not keys es5 Sunday,

    12 May, 13
  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
  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
  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
  23. array comprehension shorthand Sunday, 12 May, 13

  24. array comprehension shorthand es5 var temperature = [0, 37, 100];

    function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); Sunday, 12 May, 13
  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
  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
  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
  28. rest parameters variable args Sunday, 12 May, 13

  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
  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
  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
  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
  33. compatibility table firefox chrome Sunday, 12 May, 13

  34. be updated Sunday, 12 May, 13

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

  36. Sunday, 12 May, 13