Download - Introduction to ECMAScript 2015
![Page 1: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/1.jpg)
ECMAScript 2015Tomasz Dziuda
meet.js Łódź @ 9.VI.2015
![Page 2: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/2.jpg)
About me@dziudek [email protected]
http://dziudek.pl
Lead Developer @ GavickPro
Organizer of: • WordUp Łódź, • JoomlaDay Poland 2013, • WordCamp Poland 2014, • WordCamp Poland 2015
![Page 4: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/4.jpg)
ES2015 Today
![Page 5: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/5.jpg)
Source: http://kangax.github.io/compat-table/es6/ screenshot from: 31/5/2015
![Page 6: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/6.jpg)
https://babeljs.io/
![Page 7: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/7.jpg)
ES2015 Features
![Page 8: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/8.jpg)
Enhanced Object Literals
![Page 9: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/9.jpg)
var car = {speed: 100,getSpeed() {return this.speed;
}}
// car.speed() => 100;
![Page 10: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/10.jpg)
var chapter = 2;
var bookState = {[“ch” + chapter]: “Chapter ” + chapter,[“getChapter” + chapter]() {return this[“ch” + chapter];
}}
// bookState.ch2 => “Chapter 2”// bookState.getChapter2() => “Chapter 2”
![Page 11: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/11.jpg)
Classes
![Page 12: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/12.jpg)
class Person {constructor(name, age) {this.name = name;this.age = age
}toString() {return “Person: ” + this.name;
}}
![Page 13: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/13.jpg)
Inheritance
![Page 14: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/14.jpg)
class Person extends Mammal {constructor(name, age) {super();this.name = name;this.age = age
}toString() {return “Person: ” + this.name;
}}
![Page 15: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/15.jpg)
static, get, set
![Page 16: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/16.jpg)
class URLHelper {static hashVal() {return location.hash.replace(‘#’,’’);
}}
URLHelper.hashVal(); // http://domain.com/#top => “top”
![Page 17: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/17.jpg)
class Person {constructor(name, age) {this._name = name;this._age = age
}get name() {return this._name;
}set name(newName) {this._name = newName;
}}
![Page 18: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/18.jpg)
Built-ins subclassing
![Page 19: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/19.jpg)
class MyArray extends Array {last() {return this[this.length - 1];
}}
![Page 20: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/20.jpg)
Abstract classes
![Page 21: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/21.jpg)
class Base {constructor () {if (new.target === Base) {throw TypeError("new of abstract class Base”);
}}
}
![Page 22: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/22.jpg)
Modules
![Page 23: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/23.jpg)
// file helper/linker.jsexport var separator = ‘,’;export function link (arr) {
return arr.join(separator); }
![Page 24: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/24.jpg)
// file helper/linker.js
export {separator};
export {separator as s};
export {separator} from “linker”;
export {separator as s} from “linker”;
![Page 25: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/25.jpg)
// file app.jsimport {separator, link} from ‘helper/linker’;
![Page 26: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/26.jpg)
// file app.jsimport {separator, link} from ‘helper/linker’;
// file app.jsimport * as linker from ‘helper/linker’;// linker.separator / linker.link
![Page 27: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/27.jpg)
// file app.jsimport {separator, link} from ‘helper/linker’;
// file app.jsimport * as linker from ‘helper/linker’;// linker.separator / linker.link
// file app.jsimport {separator as s} from ‘helper/linker’;
![Page 28: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/28.jpg)
// file helper/linker.jsexport var separator = ‘,’;export default function(arr) {
return arr.join(separator); }
![Page 29: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/29.jpg)
// file app.jsimport link from ‘helper/linker’;
![Page 30: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/30.jpg)
// file app.jsimport link from ‘helper/linker’;
// file app.jsimport link, {separator} from ‘helper/linker’;
![Page 31: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/31.jpg)
Template Strings
![Page 32: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/32.jpg)
var msg = `<ul> <li>Item I</li> <li>Item II</li> <li>Item III</li> <li>Item IV</li> <li>Item V</li></ul>`;
![Page 33: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/33.jpg)
var username = “John”;var msg = `Hello, ${username}`;// msg returns “Hello, John”
![Page 34: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/34.jpg)
var firstname = “John”;var lastname = “ Doe”var msg = `Hello, ${firstname + lastname}`;// msg returns “Hello, John Doe”
![Page 35: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/35.jpg)
var fName = “John”;var msg = `Hello, ${fName.toUpperCase()}`;// msg returns “Hello, JOHN”
![Page 36: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/36.jpg)
var total = 100;var VAT = 23;var finalPrice = ‘’; // we’ll have an error without it
var msg = parseVAT`Sum: ${total} + VAT ${VAT}% = ${finalPrice}`;// "Sum: 100 + VAT 23% = 123"
![Page 37: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/37.jpg)
function parseVAT(parts, total, VAT) { var output = "",
i = 0; while (i < parts.length) { output += parts[i++]; if (i < arguments.length) { output += arguments[i]; }
if(i === 3){ output += total * (100 + VAT) / 100.0; } } return output;}
![Page 38: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/38.jpg)
function parseVAT(parts, total, VAT) { var output = "",
i = 0; while (i < parts.length) { output += parts[i++]; if (i < arguments.length) { output += arguments[i]; }
if(i === 3){ output += total * (100 + VAT) / 100.0; } } return output;}
![Page 39: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/39.jpg)
function parseVAT(parts, total, VAT) { var output = "",
i = 0; while (i < parts.length) { output += parts[i++]; if (i < arguments.length) { output += arguments[i]; }
if(i === 3){ output += total * (100 + VAT) / 100.0; } } return output;}
![Page 40: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/40.jpg)
function parseVAT(parts, total, VAT) { var output = "",
i = 0; while (i < parts.length) { output += parts[i++]; if (i < arguments.length) { output += arguments[i]; }
if(i === 3){ output += total * (100 + VAT) / 100.0; } } return output;}
![Page 41: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/41.jpg)
http://jsperf.com/es6-string-literals-vs-string-concatenation
![Page 42: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/42.jpg)
http://jsperf.com/es6-string-literals-vs-string-concatenation
![Page 43: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/43.jpg)
Constants
![Page 44: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/44.jpg)
const PI = 3.141593;
const ĘĆ = 1.858407;
var pięć = PI + ĘĆ;
![Page 45: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/45.jpg)
const PI = 3.141593;
PI = 3.14; // not work
const person = { name: “John” };
person.name = “Adam”; // Correct - use Object.freeze
person.age = 25; // Correct - use Object.seal
![Page 46: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/46.jpg)
const PI = 3.141593;
PI = 3.14; // not work
const person = { name: “John” };
person.name = “Adam”; // Correct - use Object.freeze
person.age = 25; // Correct - use Object.seal
![Page 47: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/47.jpg)
const PI = 3.141593;
PI = 3.14; // not work
const person = { name: “John” };
person.name = “Adam”; // Correct - use Object.freeze
person.age = 25; // Correct - use Object.seal
![Page 48: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/48.jpg)
Block scope
![Page 49: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/49.jpg)
{ function test() {
return 1; }
test() === 1; // True
{ function test() {
return 2; }
test() === 2; // True }
test() === 1; // Still true}
![Page 50: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/50.jpg)
{ function test() {
return 1; }
test() === 1; // True
{ function test() {
return 2; }
test() === 2; // True }
test() === 1; // Still true}
![Page 51: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/51.jpg)
{ function test() {
return 1; }
test() === 1; // True
{ function test() {
return 2; }
test() === 2; // True }
test() === 1; // Still true}
![Page 52: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/52.jpg)
{ function test() {
return 1; }
test() === 1; // True
{ function test() {
return 2; }
test() === 2; // True }
test() === 1; // Still true}
![Page 53: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/53.jpg)
{ function test() {
return 1; }
test() === 1; // True
{ function test() {
return 2; }
test() === 2; // True }
test() === 1; // Still true}
![Page 54: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/54.jpg)
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) { var temp = arr[i];}
console.log(i); // undefinedconsole.log(temp); // 3
![Page 55: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/55.jpg)
let name = “John”;
let name = “Alex”; // Error
![Page 56: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/56.jpg)
Arrow functions
![Page 57: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/57.jpg)
function (fName, lName) {return fName + ‘ ‘ + lName;
}
![Page 58: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/58.jpg)
(fName, lName) => fName + ‘ ‘ + lName;
![Page 59: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/59.jpg)
[1, 2, 3].map(n => n * 2);
[1,2,3].filter(n => n % 2 === 0);
var person = () => ({name:“John”, age:25});
![Page 60: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/60.jpg)
[1, 2, 3].map(n => n * 2);
[1,2,3].filter(n => n % 2 === 0);
var person = () => ({name:“John”, age:25});
![Page 61: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/61.jpg)
[1, 2, 3].map(n => n * 2);
[1,2,3].filter(n => n % 2 === 0);
var person = () => ({name:“John”, age:25});
![Page 62: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/62.jpg)
function Timer(){ this.time = 0;
setInterval(function() { this.time++; // won’t work }, 1000);}
var t = new Timer();
![Page 63: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/63.jpg)
function Timer(){ this.time = 0; // below line will affect the time setInterval(() => this.time++, 1000);}
var t = new Timer();
![Page 64: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/64.jpg)
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log(“Error!”));
![Page 65: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/65.jpg)
Shorthand assignment
![Page 66: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/66.jpg)
let name = “John”;
let person = {name};
// person = {name: “John”}
![Page 67: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/67.jpg)
let name = “John”;
let person = {name};
// person = {name: “John”}
![Page 68: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/68.jpg)
Destructuring
![Page 69: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/69.jpg)
var x = 1;var y = 2;
[x, y] = [y, x]; // x=2, y=1
![Page 70: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/70.jpg)
function names() {return [“John”, “Alex“];
}
var p1, p2;
[p1, p2] = names();
![Page 71: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/71.jpg)
function names() {return [“John”, “Alex“, “Max”];
}
var p1, p2;
[p1, ,p2] = names();
![Page 72: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/72.jpg)
var names = ["Alex", "John", "Max"];
var [p1, p2, p3] = names;
![Page 73: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/73.jpg)
var names = {p1:“Alex”, p2:”John", p3:”Max”
};
var {p1, p2, p3} = names;
/* p1 = Alexp2 = Johnp3 = Max*/
![Page 74: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/74.jpg)
function date({ day:d, month:m, year:y }) {return d + ‘-’ + m + ‘-’ + y;
}
date({ day: 20, month: 10, year: 1988 });
![Page 75: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/75.jpg)
Better parameter handling
![Page 76: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/76.jpg)
function power(x, y = 2) {return Math.pow(x, y);
}
// f(2) => 4
![Page 77: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/77.jpg)
function names(x, ...y) {return 1 + y.length;
}
// names(“Alex”, “John”, “Max”) => 3
![Page 78: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/78.jpg)
function names(x, y, z) {return x + “ ” + y + “ ” + z;
}
names(…[“Alex”, “John”, “Max”]);
![Page 79: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/79.jpg)
var a = [3,4,5];
var b = [1,2, …a];
// b => [1,2,3,4,5]
![Page 80: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/80.jpg)
Symbols
![Page 81: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/81.jpg)
let symbol1 = Symbol(“test”);let symbol2 = Symbol(“test”);
symbol1 === symbol2 // False
![Page 82: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/82.jpg)
let objWithSymbol = {[Symbol(“year”)]: 2015
}
console.log(objWithSymbol); // {}
![Page 83: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/83.jpg)
let objWithSymbol = {[Symbol(“year”)]: 2015
}
console.log(objWithSymbol); // {}
Object.getOwnPropertySymbols(objWithSymbol);// [Symbol(year)]
![Page 84: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/84.jpg)
Iterators & Generators
![Page 85: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/85.jpg)
let iterable = “abc”[Symbol.iterator]();
iterable.next(); // { value: “a”, done: false }iterable.next(); // { value: “b”, done: false }iterable.next(); // { value: “c”, done: false }iterable.next(); // { value: undefined, done: true }
![Page 86: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/86.jpg)
Iterable• Array
• String
• Map
• Set
• arguments
• DOM queries
![Page 87: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/87.jpg)
for .. of
![Page 88: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/88.jpg)
for(let div of document.querySelectorAll('div')) { div.style.border = "1px solid red";}
![Page 89: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/89.jpg)
var obj = { items: [1,2,3,4,5], [Symbol.iterator]() { let i = 0; let self = this; return { next() { return { done: (i >= self.items.length), value: self.items[i++] } } } }}
![Page 90: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/90.jpg)
for(let n of obj) {console.log(n);
}// 1// 2// 3// 4// 5
![Page 91: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/91.jpg)
function* gen(start, stop) {while(start <= stop) {yield start;start++;
}}
![Page 92: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/92.jpg)
var r = gen(0, 2);
r.next(); // {value: 0, done: false}r.next(); // {value: 1, done: false}r.next(); // {value: 2, done: false}r.next(); // {value: undefined, done: true}
![Page 93: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/93.jpg)
function* gen() {yield ‘start’;yield ‘middle’;yield ‘stop’;
}
var g = gen();
g.next(); // { value: ‘start’, done: false}g.next(); // { value: ‘middle’, done: false}g.next(); // { value: ‘stop’, done: false}
![Page 94: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/94.jpg)
function* odd(max) {for(var i = 0; i <= max; i++) {if(i % 2) yield i;
}}
let odds = […odd(20)]// [1,3,5,7,9,11,13,15,17,19]
![Page 95: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/95.jpg)
function* odd(max) {for(var i = 0; i <= max; i++) {if(i % 2) yield i;
}}
let odds = […odd(20)]// odds = [1,3,5,7,9,11,13,15,17,19]
![Page 96: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/96.jpg)
let odds = [];
for (let n of odd(20)) { odds.push(n);}
// odds = [1,3,5,7,9,11,13,15,17,19]
![Page 97: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/97.jpg)
Promises
![Page 98: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/98.jpg)
Promise states
• pending === !fulfilled && !rejected
• fulfilled === success
• rejected === fail
![Page 99: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/99.jpg)
function readFile(filename) {return new Promise(function(fulfill, reject) {
fs.readFile(filename, encoding, function(err, res) {if(err) reject(err);else fulfill(res);
});});
}
![Page 100: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/100.jpg)
function readFile(filename) {return new Promise(function(fulfill, reject) {
fs.readFile(filename, encoding, function(err, res) {if(err) reject(err);else fulfill(res);
});});
}
![Page 101: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/101.jpg)
function readFile(filename) {return new Promise(function(fulfill, reject) {
fs.readFile(filename, encoding, function(err, res) {if(err) reject(err);else fulfill(res);
});});
}
![Page 102: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/102.jpg)
function readFile(filename) {return new Promise(function(fulfill, reject) {
fs.readFile(filename, encoding, function(err, res) {if(err) reject(err);else fulfill(res);
});});
}
![Page 103: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/103.jpg)
readFile(‘data.json’, 'utf8').then(function (res){ return JSON.parse(res);});
![Page 104: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/104.jpg)
readFile(‘data.json’, 'utf8').then(function (res){ return JSON.parse(res);});
![Page 105: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/105.jpg)
readFile(‘data.json’, 'utf8').then(function (res){ return JSON.parse(res);}, function (err) {
console.log(err);});
![Page 106: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/106.jpg)
readFile(‘data.json’, 'utf8').then(function (res){ return JSON.parse(res);}).catch(function(err) {
console.log(err);});
![Page 107: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/107.jpg)
Promise.all([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’, 'utf8')]).then((data) => { let [ f1, f2, f3 ] = data;});
![Page 108: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/108.jpg)
Promise.all([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’, 'utf8')]).then((data) => { let [ f1, f2, f3 ] = data;});
![Page 109: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/109.jpg)
Promise.all([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’, 'utf8')]).then((data) => { let [ f1, f2, f3 ] = data;});
![Page 110: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/110.jpg)
Promise.race([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’, 'utf8')]).then((data) => { let fastest = data;});
![Page 111: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/111.jpg)
Proxies
![Page 112: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/112.jpg)
var obj = {};
var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; }});
observed.x = 10; // x = 10
![Page 113: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/113.jpg)
var obj = {};
var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; }});
observed.x = 10; // x = 10
![Page 114: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/114.jpg)
var obj = {};
var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; }});
observed.x = 10; // x = 10
![Page 115: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/115.jpg)
var obj = {};
var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; }});
observed.x = 10; // x = 10
![Page 116: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/116.jpg)
var obj = {};
var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; }});
observed.x = 10; // x = 10
![Page 117: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/117.jpg)
Maps & Sets
![Page 118: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/118.jpg)
Set
• Used to store unique values
• Iterable
• Easily accessible size
![Page 119: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/119.jpg)
var names = new Set();
names.add(“Doe”);names.add(“Johnson”);
names.has(“Doe”); // truenames.size; // 2
names.delete(“Johnson”); // truenames.size; // 1
![Page 120: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/120.jpg)
var names = new Set();
names.add(“Doe”);names.add(“Johnson”);
names.has(“Doe”); // truenames.size; // 2
names.delete(“Johnson”); // truenames.size; // 1
![Page 121: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/121.jpg)
var names = new Set();
names.add(“Doe”);names.add(“Johnson”);
names.has(“Doe”); // truenames.size; // 2
names.delete(“Johnson”); // truenames.size; // 1
![Page 122: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/122.jpg)
var names = new Set();
names.add(“Doe”);names.add(“Johnson”);
names.has(“Doe”); // truenames.size; // 2
names.delete(“Johnson”); // truenames.size; // 1
![Page 123: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/123.jpg)
var names = new Set();
names.add(“Doe”);names.add(“Johnson”);
names.has(“Doe”); // truenames.size; // 2
names.delete(“Johnson”); // truenames.size; // 1
![Page 124: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/124.jpg)
for (let name of names) {console.log(name);
}
let nameArr = […names];
for (let name of names.keys()) {console.log(name);
}// names.keys() === names.values()
![Page 125: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/125.jpg)
for (let name of names) {console.log(name);
}
let nameArr = […names];
for (let name of names.keys()) {console.log(name);
}// names.keys() === names.values()
![Page 126: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/126.jpg)
for (let name of names) {console.log(name);
}
let nameArr = […names];
for (let name of names.keys()) {console.log(name);
}// names.keys() === names.values()
![Page 127: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/127.jpg)
Map
• Used to store values connected with unique keys
• Iterable
• Easily accessible size
• key can be primitive, object or even function
![Page 128: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/128.jpg)
var relations = new Map();
relations.set(“John”, “Mary”);relations.set(“Adam”, “Eve”);
relations.size; // 2relations.get(“Adam”); // “Eve”relations.delete(“Adam”); // truerelations.size; // 1
![Page 129: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/129.jpg)
var relations = new Map();
relations.set(“John”, “Mary”);relations.set(“Adam”, “Eve”);
relations.size; // 2relations.get(“Adam”); // “Eve”relations.delete(“Adam”); // truerelations.size; // 1
![Page 130: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/130.jpg)
var relations = new Map();
relations.set(“John”, “Mary”);relations.set(“Adam”, “Eve”);
relations.size; // 2relations.get(“Adam”); // “Eve”relations.delete(“Adam”); // truerelations.size; // 1
![Page 131: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/131.jpg)
var relations = new Map();
relations.set(“John”, “Mary”);relations.set(“Adam”, “Eve”);
relations.size; // 2relations.get(“Adam”); // “Eve”relations.delete(“Adam”); // truerelations.size; // 1
![Page 132: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/132.jpg)
var relations = new Map();
relations.set(“John”, “Mary”);relations.set(“Adam”, “Eve”);
relations.size; // 2relations.get(“Adam”); // “Eve”relations.delete(“Adam”); // truerelations.size; // 1
![Page 133: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/133.jpg)
for (let [key, value] of relations) {console.log(key + “ & ” + value);
}
for (let [key, value] of relations.entries()) {console.log(key + “ & ” + value);
}
for (let key of relations.keys()) {console.log(key);
}
![Page 134: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/134.jpg)
WeakMap vs. Map
• Doesn’t prevent GC
• no information about size
• Key can be only an object (function is object too)
![Page 135: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/135.jpg)
let privateData = new WeakMap();
class MyClass { constructor(name, age) { privateData.set(this, { name: name, age: age }); }
getName() { return privateData.get(this).name; }
getAge() { return privateData.get(this).age; }}
![Page 136: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/136.jpg)
let privateData = new WeakMap();
class Person { constructor(name, age) { privateData.set(this, { name: name, age: age }); }
getName() { return privateData.get(this).name; }
getAge() { return privateData.get(this).age; }}
![Page 137: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/137.jpg)
let privateData = new WeakMap();
class Person { constructor(name, age) { privateData.set(this, { name: name, age: age }); }
getName() { return privateData.get(this).name; }
getAge() { return privateData.get(this).age; }}
![Page 138: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/138.jpg)
let privateData = new WeakMap();
class Person { constructor(name, age) { privateData.set(this, { name: name, age: age }); }
getName() { return privateData.get(this).name; }
getAge() { return privateData.get(this).age; }}
![Page 139: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/139.jpg)
// Without WeakMaplet p1 = new Person(“John”, 25);let p2 = new Person(“Adam”, 40);privateData.size; // 2
p1 = null;privateData.size; // 2
![Page 140: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/140.jpg)
// Without WeakMaplet p1 = new Person(“John”, 25);let p2 = new Person(“Adam”, 40);privateData.size; // 2
p1 = null;privateData.size; // 2
![Page 141: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/141.jpg)
WeakSet vs. Set• Doesn’t prevent GC
• non-iterable
• non-accessible element values
• no information about size
• key can be only an object
![Page 142: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/142.jpg)
Built-in Methods
![Page 143: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/143.jpg)
[1, 5, 3, 8].find(x => x > 2); // 5
“- ”.repeat(3); // “- - - ”
Object.assign(obj, {“a”: 1}, {“b”: 2});// obj = {“a”: 1, “b”: 2}
Math.sign(25); // 1Math.sign(0); // 0
Math.sign(-25); // -1
![Page 144: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/144.jpg)
[1, 5, 3, 8].find(x => x > 2); // 5
“- ”.repeat(3); // “- - - ”
Object.assign(obj, {“a”: 1}, {“b”: 2});// obj = {“a”: 1, “b”: 2}
Math.sign(25); // 1Math.sign(0); // 0
Math.sign(-25); // -1
![Page 145: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/145.jpg)
[1, 5, 3, 8].find(x => x > 2); // 5
“- ”.repeat(3); // “- - - ”
Object.assign(obj, {“a”: 1}, {“b”: 2});// obj = {“a”: 1, “b”: 2}
Math.sign(25); // 1Math.sign(0); // 0
Math.sign(-25); // -1
![Page 146: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/146.jpg)
[1, 5, 3, 8].find(x => x > 2); // 5
“- ”.repeat(3); // “- - - ”
Object.assign(obj, {“a”: 1}, {“b”: 2});// obj = {“a”: 1, “b”: 2}
Math.sign(25); // 1Math.sign(0); // 0
Math.sign(-25); // -1
![Page 147: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/147.jpg)
… and much more
![Page 148: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/148.jpg)
https://github.com/lukehoban/es6features#math--number--string--array--object-apis
![Page 149: Introduction to ECMAScript 2015](https://reader034.vdocuments.us/reader034/viewer/2022052413/55b4d865bb61ebf4528b457f/html5/thumbnails/149.jpg)
Useful links• http://www.2ality.com/2015/02/es6-classes-final.html
• http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
• http://kangax.github.io/compat-table/es6/
• https://github.com/lukehoban/es6features
• http://es6-features.org/
• http://ilikekillnerds.com/2015/02/what-are-weakmaps-in-es6/