Introduction to ECMAScript 2015

1.
ECMAScript 2015 Tomasz Dziuda meet.jsŁódź @ 9.VI.2015

2.
About me @dziudek dziudek@gmail.com http://dziudek.pl Lead Developer@ GavickPro Organizer of: • WordUp Łódź, • JoomlaDay Poland 2013, • WordCamp Poland 2014, • WordCamp Poland 2015

3.
http://dziudek.github.io/dev-links/

4.
ES2015 Today

5.
Source: http://kangax.github.io/compat-table/es6/  screenshot from:31/5/2015

6.
https://babeljs.io/

7.
ES2015 Features

8.
Enhanced Object Literals

9.
var car ={ speed: 100, getSpeed() { return this.speed; } } // car.speed() => 100;

10.
var chapter =2; var bookState = { [“ch” + chapter]: “Chapter ” + chapter, [“getChapter” + chapter]() { return this[“ch” + chapter]; } } // bookState.ch2 => “Chapter 2” // bookState.getChapter2() => “Chapter 2”

11.
Classes

12.
class Person { constructor(name,age) { this.name = name; this.age = age } toString() { return “Person: ” + this.name; } }

13.
Inheritance

14.
class Person extendsMammal { constructor(name, age) { super(); this.name = name; this.age = age } toString() { return “Person: ” + this.name; } }

15.
static, get, set

16.
class URLHelper { statichashVal() { return location.hash.replace(‘#’,’’); } } URLHelper.hashVal(); // http://domain.com/#top => “top”

17.
class Person { constructor(name,age) { this._name = name; this._age = age } get name() { return this._name; } set name(newName) { this._name = newName; } }

18.
Built-ins subclassing

19.
class MyArray extendsArray { last() { return this[this.length - 1]; } }

20.
Abstract classes

21.
class Base { constructor() { if (new.target === Base) { throw TypeError("new of abstract class Base”); } } }

22.
Modules

23.
// file helper/linker.js exportvar separator = ‘,’; export function link (arr) { return arr.join(separator); }

24.
// file helper/linker.js export{separator}; export {separator as s}; export {separator} from “linker”; export {separator as s} from “linker”;

25.
// file app.js import{separator, link} from ‘helper/linker’;

26.
// file app.js import{separator, link} from ‘helper/linker’; // file app.js import * as linker from ‘helper/linker’; // linker.separator / linker.link

27.
// file app.js import{separator, link} from ‘helper/linker’; // file app.js import * as linker from ‘helper/linker’; // linker.separator / linker.link // file app.js import {separator as s} from ‘helper/linker’;

28.
// file helper/linker.js exportvar separator = ‘,’; export default function(arr) { return arr.join(separator); }

29.
// file app.js importlink from ‘helper/linker’;

30.
// file app.js importlink from ‘helper/linker’; // file app.js import link, {separator} from ‘helper/linker’;

31.
Template Strings

32.
var msg =`<ul> <li>Item I</li> <li>Item II</li> <li>Item III</li> <li>Item IV</li> <li>Item V</li> </ul>`;

33.
var username =“John”; var msg = `Hello, ${username}`; // msg returns “Hello, John”

34.
var firstname =“John”; var lastname = “ Doe” var msg = `Hello, ${firstname + lastname}`; // msg returns “Hello, John Doe”

35.
var fName =“John”; var msg = `Hello, ${fName.toUpperCase()}`; // msg returns “Hello, JOHN”

36.
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"

37.
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; }

38.

39.

40.

41.
http://jsperf.com/es6-string-literals-vs-string-concatenation

42.
http://jsperf.com/es6-string-literals-vs-string-concatenation

43.
Constants

44.
const PI =3.141593; const ĘĆ = 1.858407; var pięć = PI + ĘĆ;

45.
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

46.

47.

48.
Block scope

49.
{ function test() { return1; } test() === 1; // True { function test() { return 2; } test() === 2; // True } test() === 1; // Still true }

50.

51.

52.

53.

54.
var arr =[1,2,3]; for (let i = 0; i < arr.length; i++) { var temp = arr[i]; } console.log(i); // undefined console.log(temp); // 3

55.
let name =“John”; let name = “Alex”; // Error

56.
Arrow functions

57.
function (fName, lName){ return fName + ‘ ‘ + lName; }

58.
(fName, lName) =>fName + ‘ ‘ + lName;

59.
[1, 2, 3].map(n=> n * 2); [1,2,3].filter(n => n % 2 === 0); var person = () => ({name:“John”, age:25});

60.

61.

62.
function Timer(){ this.time =0; setInterval(function() { this.time++; // won’t work }, 1000); } var t = new Timer();

63.
function Timer(){ this.time =0; // below line will affect the time setInterval(() => this.time++, 1000); } var t = new Timer();

64.
fetch(url).then(response => response.json()) .then(data=> console.log(data)) .catch(e => console.log(“Error!”));

65.
Shorthand assignment

66.
let name =“John”; let person = {name}; // person = {name: “John”}

67.
let name =“John”; let person = {name}; // person = {name: “John”}

68.
Destructuring

69.
var x =1; var y = 2; [x, y] = [y, x]; // x=2, y=1

70.
function names() { return[“John”, “Alex“]; } var p1, p2; [p1, p2] = names();

71.
function names() { return[“John”, “Alex“, “Max”]; } var p1, p2; [p1, ,p2] = names();

72.
var names =["Alex", "John", "Max"]; var [p1, p2, p3] = names;

73.
var names ={ p1:“Alex”, p2:”John", p3:”Max” }; var {p1, p2, p3} = names; /* p1 = Alex p2 = John p3 = Max */

74.
function date({ day:d,month:m, year:y }) { return d + ‘-’ + m + ‘-’ + y; } date({ day: 20, month: 10, year: 1988 });

75.
Better parameter handling

76.
function power(x, y= 2) { return Math.pow(x, y); } // f(2) => 4

77.
function names(x, ...y){ return 1 + y.length; } // names(“Alex”, “John”, “Max”) => 3

78.
function names(x, y,z) { return x + “ ” + y + “ ” + z; } names(…[“Alex”, “John”, “Max”]);

79.
var a =[3,4,5]; var b = [1,2, …a]; // b => [1,2,3,4,5]

80.
Symbols

81.
let symbol1 =Symbol(“test”); let symbol2 = Symbol(“test”); symbol1 === symbol2 // False

82.
let objWithSymbol ={ [Symbol(“year”)]: 2015 } console.log(objWithSymbol); // {}

83.
let objWithSymbol ={ [Symbol(“year”)]: 2015 } console.log(objWithSymbol); // {} Object.getOwnPropertySymbols(objWithSymbol); // [Symbol(year)]

84.
Iterators & Generators

85.
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 }

86.
Iterable • Array • String •Map • Set • arguments • DOM queries

87.
for .. of

88.
for(let div ofdocument.querySelectorAll('div')) { div.style.border = "1px solid red"; }

89.
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++] } } } } }

90.
for(let n ofobj) { console.log(n); } // 1 // 2 // 3 // 4 // 5

91.
function* gen(start, stop){ while(start <= stop) { yield start; start++; } }

92.
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}

93.
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}

94.
function* odd(max) { for(vari = 0; i <= max; i++) { if(i % 2) yield i; } } let odds = […odd(20)] // [1,3,5,7,9,11,13,15,17,19]

95.
function* odd(max) { for(vari = 0; i <= max; i++) { if(i % 2) yield i; } } let odds = […odd(20)] // odds = [1,3,5,7,9,11,13,15,17,19]

96.
let odds =[]; for (let n of odd(20)) { odds.push(n); } // odds = [1,3,5,7,9,11,13,15,17,19]

97.
Promises

98.
Promise states • pending=== !fulﬁlled && !rejected • fulﬁlled === success • rejected === fail

99.
function readFile(filename) { returnnew Promise(function(fulfill, reject) { fs.readFile(filename, encoding, function(err, res) { if(err) reject(err); else fulfill(res); }); }); }

100.

101.

102.

103.
readFile(‘data.json’, 'utf8').then(function (res){ returnJSON.parse(res); });

104.
readFile(‘data.json’, 'utf8').then(function (res){ returnJSON.parse(res); });

105.
readFile(‘data.json’, 'utf8').then(function (res){ returnJSON.parse(res); }, function (err) { console.log(err); });

106.
readFile(‘data.json’, 'utf8').then(function (res){ returnJSON.parse(res); }).catch(function(err) { console.log(err); });

107.
Promise.all([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’,'utf8') ]).then((data) => { let [ f1, f2, f3 ] = data; });

108.

109.

110.
Promise.race([ readFile(‘data1.json’, 'utf8'), readFile(‘data2.json’, 'utf8'), readFile(‘data3.json’,'utf8') ]).then((data) => { let fastest = data; });

111.
Proxies

112.
var obj ={}; var observed = new Proxy(obj, { set(target, key, value, receiver) { console.log(key+'='+value); target[key] = value; } }); observed.x = 10; // x = 10

113.

114.

115.

116.

117.
Maps & Sets

118.
Set • Used tostore unique values • Iterable • Easily accessible size

119.
var names =new Set(); names.add(“Doe”); names.add(“Johnson”); names.has(“Doe”); // true names.size; // 2 names.delete(“Johnson”); // true names.size; // 1

120.

121.

122.

123.

124.
for (let nameof names) { console.log(name); } let nameArr = […names]; for (let name of names.keys()) { console.log(name); } // names.keys() === names.values()

125.

126.

127.
Map • Used tostore values connected with unique keys • Iterable • Easily accessible size • key can be primitive, object or even function

128.
var relations =new Map(); relations.set(“John”, “Mary”); relations.set(“Adam”, “Eve”); relations.size; // 2 relations.get(“Adam”); // “Eve” relations.delete(“Adam”); // true relations.size; // 1

129.

130.

131.

132.

133.
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); }

134.
WeakMap vs. Map •Doesn’t prevent GC • no information about size • Key can be only an object (function is object too)

135.
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; } }

136.
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; } }

137.

138.

139.
// Without WeakMap letp1 = new Person(“John”, 25); let p2 = new Person(“Adam”, 40); privateData.size; // 2 p1 = null; privateData.size; // 2

140.
// Without WeakMap letp1 = new Person(“John”, 25); let p2 = new Person(“Adam”, 40); privateData.size; // 2 p1 = null; privateData.size; // 2

141.
WeakSet vs. Set •Doesn’t prevent GC • non-iterable • non-accessible element values • no information about size • key can be only an object

142.
Built-in Methods

143.
[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); // 1 Math.sign(0); // 0 Math.sign(-25); // -1

144.

145.

146.

147.
… and muchmore

148.
https://github.com/lukehoban/es6features#math--number-- string--array--object-apis

149.
Useful links • http://www.2ality.com/2015/02/es6-classes-ﬁnal.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/

Introduction to ECMAScript 2015

More Related Content

What's hot

Similar to Introduction to ECMAScript 2015

More from Tomasz Dziuda

Recently uploaded

Introduction to ECMAScript 2015