javascript language update 2016 (llot)
TRANSCRIPT
![Page 1: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/1.jpg)
JSLANGUAGE UPDATE
@teppeis
LLoT Aug 27, 2016
![Page 2: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/2.jpg)
Hello!• Teppei Sato, @teppeis • Cybozu, Inc. / kintone • Languages in Cybozu
• JavaScript, PHP, Python • Java, Go, C/C++
![Page 3: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/3.jpg)
ECMAScript
![Page 4: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/4.jpg)
ECMAScript
• JavaScript • Ecma International TC39
![Page 5: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/5.jpg)
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
![Page 6: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/6.jpg)
ES2015
![Page 7: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/7.jpg)
ES 2015�“ES6”
ES 5.1�(2011)
ES 5�(2009)
ES 3 �(1999)
ES 2�(1998)
ES 1 �(1997)
The ECMAScript Standard Timeline
JS Performance�Revolution
“ES4”E4X�
“ES4”
“Web 2.0” / AJAX
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
![Page 8: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/8.jpg)
New syntax• Arrow Function • Classes • Modules • Block Scope (let/const) • Extended Object
Literal • Default Params • Rest Params • Spread Operator
• Destructuring • Iterator • Generator • Template Literal • Tail Call Optimization
![Page 9: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/9.jpg)
New built-in classes and objects
• Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
![Page 10: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/10.jpg)
Improvement of existing classes
• String • RegExp • Array • Object • Math • Number
![Page 12: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/12.jpg)
ES6 compatibility tablehttps://kangax.github.io/compat-table/es6/
![Page 13: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/13.jpg)
ES6 compat-table score
• Safari 10 (WebKit): 100% • Chrome 52: 97% • Edge 14: 95% • Firefox 48: 91% • IE11: 11% => with Babel: 71%
• • ES Modules …
![Page 14: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/14.jpg)
ES2016!
![Page 15: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/15.jpg)
ECMAScript 2016
• 2016/6/14 • 2
• Array.prototype.includes • Exponentiation Operator
•
![Page 16: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/16.jpg)
Array.prototype.includes
• Available in Chrome, Edge, Firefox, Safari 9+
assert([1, 2, 3].includes(2) === true); assert([1, 2, 3].includes(4) === false);
![Page 17: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/17.jpg)
Exponentiation Operator
• Available in Chrome, Edge, WebKit
// same as: 2 * 2 * 2 let cubed = 2 ** 3;
let a = 2; // same as: a = a * a * a; a **= 3;
![Page 18: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/18.jpg)
![Page 19: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/19.jpg)
…ES�
2017ES �
2016ES �
2015ES 5.1�(2011)
ES 5�(2009)
ES 3�(1999)
ES 2�(1998)
ES 1�(1997)
The ECMAScript Standard Timeline
Annual June Incremental Updates“ES4”
E4X�“ES4”
Release trains are now leaving the station
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
![Page 20: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/20.jpg)
• 5 Stage
• Stage
6 ES20XX
• 6
• Stage 2
• GitHub /
![Page 21: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/21.jpg)
The TC39 Process
• Stage 0: Strawman ( )
• Stage 1: Proposal ( )
• Stage 2: Draft ( )
• Stage 3: Candidate ( , )
• Stage 4: Finished (2 )
![Page 22: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/22.jpg)
• "ES20XX"
• Stage
• compat-table
![Page 23: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/23.jpg)
Allen Wirfs-Brock
“(ES6 is…) It’s the foundation for the next 10-20 years of JavaScript evolution.”
https://flic.kr/p/9E5dV2
![Page 24: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/24.jpg)
What's in next ES2017?
![Page 25: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/25.jpg)
ES2017 (Current Stage 4 Proposals)
• Async Functions • Object.values/Object.entries • String padding • Object.getOwnPropertyDescriptors • Trailing commas in function parameter lists and calls • and more…
![Page 26: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/26.jpg)
Async Functions
• Available in Edge, Chrome with flag
async function chainAnimationsAsync(elem, animations) { let ret = null; try { for(const anim of animations) { ret = await anim(elem); } } catch(e) { /* ignore and keep going */ } return ret; }
![Page 27: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/27.jpg)
ES6 Modules…
![Page 28: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/28.jpg)
ES Modules export/import
// export.js export default function() { return "foo"; }
// import.js import foo from "./export.js"; foo();
![Page 29: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/29.jpg)
ES Modules are Awesome!
• JavaScript missing piece
• Node.js
• Browserify, Webpack
• => •
![Page 30: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/30.jpg)
• ES6 •
• Browser: whatwg/loader • Node.js: nodejs/node-eps#3
• • .js .mjs
• Babel •
![Page 31: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/31.jpg)
![Page 32: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/32.jpg)
• ES2015 (ES6)
• ES2016
• async/await
• ES Modules •
![Page 33: JavaScript Language Update 2016 (LLoT)](https://reader033.vdocuments.mx/reader033/viewer/2022042707/586e8bd31a28aba0038b81cf/html5/thumbnails/33.jpg)
• Making a Standard: Inside the ECMAScript Sausage Factory by Allen Wirfs-Brockhttp://wirfs-brock.com/allen/talks/forwardjs2016.pdf
• ECMAScript as a Living Standard by azuhttp://azu.github.io/slide/2016/node-es/ecmascript.html
• You Don't Know ES Modules by teppeis https://www.slideshare.net/teppeis/you-dont-know-es-modules