Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

es6 goals Sunday, 12 May, 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

array comprehension shorthand Sunday, 12 May, 13

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

rest parameters variable args Sunday, 12 May, 13

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

compatibility table firefox chrome Sunday, 12 May, 13

Slide 34

Slide 34 text

be updated Sunday, 12 May, 13

Slide 35

Slide 35 text

start playing! google traceur Sunday, 12 May, 13

Slide 36

Slide 36 text

Sunday, 12 May, 13