ES6 is so 2015, meet ES2016! @ RuhrJS
-
Upload
paul-verbeek -
Category
Internet
-
view
187 -
download
2
Transcript of ES6 is so 2015, meet ES2016! @ RuhrJS
![Page 1: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/1.jpg)
ES6 is so 2015meet ES2016!
![Page 2: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/2.jpg)
Paul Verbeek
![Page 4: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/4.jpg)
nlhtml5.org
![Page 5: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/5.jpg)
ES6 is so 2015meet ES2016!
![Page 6: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/6.jpg)
ECMA-262(a timeline)
![Page 7: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/7.jpg)
ECMA-262(a timeline)
December 1995 Announcement of JavaScript by Sun and Netscape
![Page 8: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/8.jpg)
ECMA-262(a timeline)
December 1995 Announcement of JavaScript by Sun and Netscape
![Page 9: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/9.jpg)
ECMA-262(a timeline)
December 1995 Announcement of JavaScript by Sun and Netscape
![Page 10: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/10.jpg)
ECMA-262(a timeline)
December 1995 Announcement of JavaScript by Sun and Netscape"JavaScript will be the most effective method to connect
HTML-based content to Java applets.
- Bill Joy, co-founder Sun
https://web.archive.org/web/20070916144913/http://wp.netscape.com/
newsref/pr/newsrelease67.html
![Page 11: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/11.jpg)
ECMA-262(a timeline)
December 1995March 1996
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScript
![Page 12: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/12.jpg)
ECMA-262(a timeline)
December 1995March 1996
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScript
![Page 13: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/13.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScript
![Page 14: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/14.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScript
![Page 15: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/15.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScript
"ECMAScript was always an unwanted trade name that sounds like a skin disease.
- Brendan Eich, creator of JavaScript
https://mail.mozilla.org/pipermail/es-discuss/2006-October/000133.html
![Page 16: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/16.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262
![Page 17: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/17.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more
![Page 18: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/18.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexity
![Page 19: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/19.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexity
![Page 20: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/20.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008December 2009
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexityES5, strict mode, JSON, get/set, and more
![Page 21: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/21.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008December 2009
June 2011
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexityES5, strict mode, JSON, get/set, and moreES5.1, to align with ISO/IEC 16262 3rd edition
![Page 22: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/22.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008December 2009
June 2011June 2015
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexityES5, strict mode, JSON, get/set, and moreES5.1, to align with ISO/IEC 16262 3rd editionES6/ES2015, a lot of stuff!
![Page 23: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/23.jpg)
ECMA-262(a timeline)
December 1995March 1996
August 1996June 1997
August 1998December 1999
July 2008December 2009
June 2011June 2015
2016
Announcement of JavaScript by Sun and NetscapeNetscape Navigator 2.0, with JavaScriptInternet Explorer 3.0, with JScriptFirst edition of ECMAScriptES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and moreES4, Abandoned due to complexityES5, strict mode, JSON, get/set, and moreES5.1, to align with ISO/IEC 16262 3rd editionES6/ES2015, a lot of stuff!ES2016, not lot of stuff!
![Page 24: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/24.jpg)
The TC39 processAKA. bunch of white guys
![Page 25: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/25.jpg)
The TC39 process
![Page 26: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/26.jpg)
The TC39 processStage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
![Page 27: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/27.jpg)
The TC39 processStage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
Stage 1: ProposalFormally accepted proposal
![Page 28: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/28.jpg)
The TC39 processStage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
Stage 1: ProposalFormally accepted proposal
Stage 2: DraftHas description of syntax and semantics
![Page 29: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/29.jpg)
The TC39 processStage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
Stage 1: ProposalFormally accepted proposal
Stage 2: DraftHas description of syntax and semantics
Stage 3: CandidateSpec text complete, has at least 2 implementations
![Page 30: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/30.jpg)
The TC39 processStage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
Stage 1: ProposalFormally accepted proposal
Stage 2: DraftHas description of syntax and semantics
Stage 3: CandidateSpec text complete, has at least 2 implementations
Stage 4: FinishedReady for standard, passes unit tests
![Page 31: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/31.jpg)
ECMAScript 2016
![Page 32: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/32.jpg)
ECMA-262 7th editionThe ECMAScript® 2016 Language Specification
![Page 33: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/33.jpg)
⚠ Following slides will mostly contain
code
![Page 34: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/34.jpg)
Exponentiation Operator
![Page 35: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/35.jpg)
x ** y
![Page 36: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/36.jpg)
x ** y
Math.pow(x, y);
![Page 37: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/37.jpg)
x ** y
Math.pow(x, y);
let squared = 2 ** 2;// same as 2 * 2
![Page 38: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/38.jpg)
x ** y
Math.pow(x, y);
let cubed = 3;cubed **= 3;// same as cubed = 3 * 3 * 3
let squared = 2 ** 2;// same as 2 * 2
![Page 39: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/39.jpg)
Exponentiation Operator
![Page 40: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/40.jpg)
Exponentiation Operator
14 52
![Page 41: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/41.jpg)
Array.prototype.includes
![Page 42: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/42.jpg)
['a', 'b', 'c'].indexOf('a') >= 0; // true ['a', 'b', 'c'].indexOf('d') >= 0; // false
![Page 43: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/43.jpg)
['a', 'b', 'c'].indexOf('a') >= 0; // true ['a', 'b', 'c'].indexOf('d') >= 0; // false
['a', 'b', 'c'].includes('a'); // true['a', 'b', 'c'].includes('d'); // false
![Page 44: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/44.jpg)
['a', 'b', NaN].indexOf(NaN) >= 0; // false
['a', 'b', NaN].includes(NaN); // true
![Page 45: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/45.jpg)
['a', 'b', NaN].indexOf(NaN) >= 0; // false
['a', 'b', NaN].includes(NaN); // true
[ , , ].indexOf(undefined) >= 0; // false
[ , , ].includes(undefined); // true
![Page 46: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/46.jpg)
Wait? includes? Why not contains?
![Page 47: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/47.jpg)
Wait? includes? Why not contains?
![Page 48: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/48.jpg)
Array.prototype.includes
![Page 49: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/49.jpg)
Array.prototype.includes
14
![Page 50: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/50.jpg)
ECMA-262 8th editionThe ECMAScript® 2017 Language Specification
![Page 51: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/51.jpg)
Not really…
![Page 52: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/52.jpg)
Stage 4: FinishedReady for standard, passes unit tests
![Page 53: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/53.jpg)
Stage 4: FinishedReady for standard, passes unit tests
• Object.values/Object.entries
![Page 54: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/54.jpg)
Stage 4: FinishedReady for standard, passes unit tests
• Object.values/Object.entries• String padding
![Page 55: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/55.jpg)
Stage 4: FinishedReady for standard, passes unit tests
• Object.values/Object.entries• String padding• Object.getOwnPropertyDescriptors()
![Page 56: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/56.jpg)
Stage 4: FinishedReady for standard, passes unit tests
• Object.values/Object.entries• String padding• Object.getOwnPropertyDescriptors()
https://github.com/tc39/proposals/blob/master/finished-proposals.md
![Page 57: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/57.jpg)
Object.values / Object.entries
![Page 58: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/58.jpg)
const obj = { name: 'Paul', age: 30 };
let keys = Object.keys(obj);// ['name', 'age']
![Page 59: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/59.jpg)
const obj = { name: 'Paul', age: 30 };
let keys = Object.keys(obj);// ['name', 'age']
let values = Object.values(obj);// ['Paul', 30]
![Page 60: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/60.jpg)
const obj = { name: 'Paul', age: 30 };
let keys = Object.keys(obj);// ['name', 'age']
let values = Object.values(obj);// ['Paul', 30]
let entries = Object.entries(obj);// [['name', 'Paul'], ['age', 30]]
![Page 61: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/61.jpg)
const obj = { name: 'Paul', age: 30 };
let keys = Object.keys(obj);// ['name', 'age']
let values = Object.values(obj);// ['Paul', 30]
let entries = Object.entries(obj);// [['name', 'Paul'], ['age', 30]]
for (let [key,value] of Object.entries(obj)) { console.log(`${key}: ${value}`);}
// 'name': 'Paul'// 'age': 30
![Page 62: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/62.jpg)
Object.values / Object.entries
![Page 63: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/63.jpg)
Object.values / Object.entries
14 51
![Page 64: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/64.jpg)
String padding
![Page 65: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/65.jpg)
String padding*insert left-pad joke*
![Page 66: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/66.jpg)
'1'.padStart(3, '0');// '001''1'.padEnd(3, '0');// '100'
![Page 67: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/67.jpg)
'1'.padStart(3, '0');// '001''1'.padEnd(3, '0');// '100'
'Ruhr'.padEnd(9, 'JS');// 'RuhrJSJSJ'
![Page 68: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/68.jpg)
'1'.padStart(3, '0');// '001''1'.padEnd(3, '0');// '100'
'Ruhr'.padEnd(9, 'JS');// 'RuhrJSJSJ'
'foo'.padStart(8);// ' foo'
![Page 69: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/69.jpg)
String padding
![Page 70: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/70.jpg)
String padding
1014 52
![Page 71: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/71.jpg)
Object.getOwnPropertyDescriptors()
![Page 72: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/72.jpg)
Object.getOwnPropertyDescriptors()
![Page 73: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/73.jpg)
const obj = { [Symbol('foo')]: 123, get bar() { return 'abc' },}; console.log(Object.getOwnPropertyDescriptors(obj));// Output:// { [Symbol('foo')]:// { value: 123,// writable: true,// enumerable: true,// configurable: true },// bar:// { get: [Function: bar],// set: undefined,// enumerable: true,// configurable: true } }
![Page 74: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/74.jpg)
var o1 = { a: 1 };var o2 = { b: 2 };Object.assign(o1, o2);console.log(o1); // { a: 1, b: 2 }
Copying properties into an object
![Page 75: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/75.jpg)
Copying properties into an objectconst source = { set foo(value) { console.log(value); }}; console.log(Object.getOwnPropertyDescriptor(source, 'foo'));// { get: undefined,// set: [Function: foo],// enumerable: true,// configurable: true }
![Page 76: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/76.jpg)
Copying properties into an objectconst source = { set foo(value) { console.log(value); }}; console.log(Object.getOwnPropertyDescriptor(source, 'foo'));// { get: undefined,// set: [Function: foo],// enumerable: true,// configurable: true }
const target = {};Object.assign(target, source);console.log(Object.getOwnPropertyDescriptor(target, 'foo'));// { value: undefined,// writable: true,// enumerable: true,// configurable: true }
![Page 77: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/77.jpg)
Copying properties into an objectconst source = { set foo(value) { console.log(value); }};
const target = {};Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));console.log(Object.getOwnPropertyDescriptor(target, 'foo'));// { get: undefined,// set: [Function: foo],// enumerable: true,// configurable: true }
![Page 78: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/78.jpg)
Cloning objects
const clone = Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) );
![Page 79: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/79.jpg)
Object.getOwnPropertyDescriptors()
![Page 80: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/80.jpg)
Object.getOwnPropertyDescriptors()
51 10
![Page 81: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/81.jpg)
Stage 3: CandidateSpec text complete, has at least 2 implementations
![Page 82: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/82.jpg)
Stage 3: CandidateSpec text complete, has at least 2 implementations
• SIMD.JS - SIMD APIs + polyfill
![Page 83: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/83.jpg)
Stage 3: CandidateSpec text complete, has at least 2 implementations
• SIMD.JS - SIMD APIs + polyfill• Async functions
![Page 84: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/84.jpg)
Stage 3: CandidateSpec text complete, has at least 2 implementations
• SIMD.JS - SIMD APIs + polyfill• Async functions• Trailing commas in function parameter lists and calls
![Page 85: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/85.jpg)
Stage 3: CandidateSpec text complete, has at least 2 implementations
• SIMD.JS - SIMD APIs + polyfill• Async functions• Trailing commas in function parameter lists and calls• Function.prototype.toString revision
![Page 86: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/86.jpg)
SIMD.JS
![Page 87: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/87.jpg)
SIMD(pronounced sim-dee)
Single Instruction/Multiple Data
![Page 88: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/88.jpg)
SIMDSISD
![Page 89: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/89.jpg)
let a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0);let b = SIMD.Float32x4(5.0, 6.0, 7.0, 8.0);let c = SIMD.Float32x4.add(a, b);
let d = SIMD.Bool32x4(1,0,0,1);SIMD.Bool32x4.anyTrue(d);SIMD.Bool32x4.allTrue(d);
![Page 90: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/90.jpg)
Example
http://peterjensen.github.io/mandelbrot/js/mandelbrot-asm.html
![Page 91: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/91.jpg)
SIMD.JS
![Page 92: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/92.jpg)
SIMD.JS
14
![Page 93: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/93.jpg)
Async functions
![Page 94: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/94.jpg)
function doSomethingAsync(callback) { setTimeout(function () { if (typeof callback === 'function') { callback('something'); } }, 1000)}
![Page 95: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/95.jpg)
function doSomethingAsync(callback) { setTimeout(function () { if (typeof callback === 'function') { callback('something'); } }, 1000)} function doWork() { console.log('start'); doSomethingAsync(function (value) { console.log(value) });} doWork();console.log('working');// 'start'// 'working'// 'something'
![Page 96: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/96.jpg)
function doSomethingAsync() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('something'); }, 1000) });} function doWork() { console.log('start'); doSomethingAsync().then(function (value) { console.log(value) });} doWork();console.log('working');// 'start'// 'working'// 'something'
![Page 97: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/97.jpg)
function doSomethingAsync() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('something'); }, 1000) });} async function doWork() { console.log('start'); var value = await doSomethingAsync(); console.log(value);} doWork();console.log('working');// 'start'// 'working'// 'something'
![Page 98: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/98.jpg)
function doSomethingAsync() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('something'); }, 1000) });} async function doWork() { console.log('start'); var value = await doSomethingAsync(); console.log(value); value += await doSomethingAsync(); console.log(value);} doWork();console.log('working');// 'start'// 'working'// 'something'// 'somethingsomething'
![Page 99: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/99.jpg)
function doSomethingAsync() { return new Promise(function (resolve, reject) { setTimeout(function () { reject('you failed! hah!'); }, 1000) });} async function doWork() { console.log('start'); var value; try { value = await doSomethingAsync(); } catch (e) { value = 'error: ' + e.message; } console.log(value);} doWork();console.log('working');// 'start'// 'working'// 'you failed! hah!'
![Page 100: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/100.jpg)
https://ponyfoo.com/articles/understanding-javascript-async-await
![Page 101: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/101.jpg)
Async functions
![Page 102: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/102.jpg)
Async functions
14
![Page 103: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/103.jpg)
Trailing commas in function parameter lists and calls
![Page 104: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/104.jpg)
let obj = { first: 'Jane', last: 'Doe',};
let arr = [ 'red', 'green', 'blue',]; console.log(arr.length); // 3
Trailing commas in objects and arrays
![Page 105: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/105.jpg)
In function parameter lists and calls
function foo( param1, param2,) {}foo( 'abc', 'def',);
![Page 106: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/106.jpg)
Trailing commas in function parameter lists and calls
![Page 107: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/107.jpg)
Trailing commas in function parameter lists and calls
14 10
![Page 108: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/108.jpg)
Stage 2: DraftHas description of syntax and semantics
• Asynchronous Iterators • function.sent metaproperty • Rest/Spread properties • Shared memory and atomics • System.global • Lifting Template Literal Restriction
![Page 109: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/109.jpg)
Stage 1: ProposalFormally accepted proposal
• export * as ns from “mod”; statements• export v from “mod”; statements• Class and Property Decorators• ArrayBuffer.transfer • Observable • String.prototype.{trimLeft,trimRight} • Class Property Declarations
![Page 110: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/110.jpg)
Stage 1: Proposal (continued)Formally accepted proposal
• String#matchAll • Private Fields • WeakRefs • Frozen Realms • Cancelable Promises
![Page 111: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/111.jpg)
Stage 0: StrawmanFree-form ideas, reviewed in TC39 meetings
• String.prototype.at• Zones• Object enumerables• Defensible Classes • Relationships • Structured Clone • Annex B - HTML Attribute Event Handlers • Reflect.isCallable/Reflect.isConstructor • Additional metaproperties • Function Bind Syntax
![Page 112: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/112.jpg)
Stage 0: Strawman (continued)Free-form ideas, reviewed in TC39 meetings
• Do Expressions • RegExp additions • 64-Bit Integer Operations • Method Parameter Decorators • Function Expression Decorators • Updates to Tail Calls to include an explicit syntactic
opt-in
![Page 113: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/113.jpg)
Edge 14 is going to be awesome :-)
![Page 114: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/114.jpg)
Edge 14 is going to be awesome :-)
![Page 116: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/116.jpg)
Status: https://github.com/tc39/ecma262 Specs: https://tc39.github.io/ecma262/
![Page 118: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/118.jpg)
Let’s stop calling it ‘ECMAScript x’
and start call it JavaScript again!
![Page 121: ES6 is so 2015, meet ES2016! @ RuhrJS](https://reader031.fdocuments.us/reader031/viewer/2022022413/58edc1ea1a28ab91618b4637/html5/thumbnails/121.jpg)
Questions?