JavaScript Language Update 2016 (LLoT)
•
11 likes•10,180 views
This document discusses the evolution of JavaScript and the ECMAScript standard over time. It covers new features introduced in ES2015 (ES6) like arrow functions, classes, modules, and new built-in objects. It also mentions upcoming features in ES2017 like async functions and describes the process for proposing and standardizing new JavaScript features.
![Array.prototype.includes
• Available in Chrome, Edge, Firefox, Safari 9+
assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);](https://image.slidesharecdn.com/javascript-language-update-2016-160827015844/85/JavaScript-Language-Update-2016-LLoT-16-320.jpg)
JavaScript Language Update 2016 (LLoT)
- 2. Hello! • Teppei Sato, @teppeis • Cybozu, Inc. / kintone • Languages in Cybozu • JavaScript, PHP, Python • Java, Go, C/C++
- 3. ECMAScript
- 4. ECMAScript • JavaScript • Ecma International TC39
- 6. ES2015
- 7. 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
- 8. 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
- 9. New built-in classes and objects • Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
- 10. Improvement of existing classes • String • RegExp • Array • Object • Math • Number
- 13. ES6 compat-table score • Safari 10 (WebKit): 100% • Chrome 52: 97% • Edge 14: 95% • Firefox 48: 91% • IE11: 11% => with Babel: 71% • • ES Modules …
- 14. ES2016!
- 15. ECMAScript 2016 • 2016/6/14 • 2 • Array.prototype.includes • Exponentiation Operator •
- 16. Array.prototype.includes • Available in Chrome, Edge, Firefox, Safari 9+ assert([1, 2, 3].includes(2) === true); assert([1, 2, 3].includes(4) === false);
- 17. 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;
- 19. … ES 2017 ES 2016 ES 2015 ES 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
- 20. • 5 Stage • Stage 6 ES20XX • 6 • Stage 2 • GitHub /
- 21. The TC39 Process • Stage 0: Strawman ( ) • Stage 1: Proposal ( ) • Stage 2: Draft ( ) • Stage 3: Candidate ( , ) • Stage 4: Finished (2 )
- 22. • "ES20XX" • Stage • compat-table
- 23. Allen Wirfs-Brock “(ES6 is…) It’s the foundation for the next 10-20 years of JavaScript evolution.” https://flic.kr/p/9E5dV2
- 24. What's in next ES2017?
- 25. 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…
- 26. 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; }
- 27. ES6 Modules…
- 28. ES Modules export/import // export.js export default function() { return "foo"; } // import.js import foo from "./export.js"; foo();
- 29. ES Modules are Awesome! • JavaScript missing piece • Node.js • Browserify, Webpack • => •
- 30. • ES6 • • Browser: whatwg/loader • Node.js: nodejs/node-eps#3 • • .js .mjs • Babel •
- 32. • ES2015 (ES6) • ES2016 • async/await • ES Modules •
- 33. • Making a Standard: Inside the ECMAScript Sausage Factory by Allen Wirfs-Brock http://wirfs-brock.com/allen/talks/forwardjs2016.pdf • ECMAScript as a Living Standard by azu http://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