ECMAScript 2017
1 like•253 views
This document discusses ECMAScript 2017 (ES8). Major features include async functions which allow asynchronous code to be written in a cleaner style using await, and shared memory/atomics which allow multiple threads to share memory in a thread-safe way. Minor features include new methods like Object.entries() and padStart/padEnd string methods. ECMAScript standards are developed by TC39 through a multi-stage process to refine features from initial proposals to finished standards.
![EXAMPLES - INCLUDES AND EXPONENTIATION
10
Exponentiation
let number = 3;
console.log(Math.pow(3, 2));
// 9
number **= 2;
console.log(number);
// 9
Includes
const arr = [NaN, 1];
console.log(arr.indexOf(NaN));
// -1
console.log(arr.includes(NaN));
// true](https://image.slidesharecdn.com/ecmascript2017-170609022155/85/ECMAScript-2017-10-320.jpg)
![EXAMPLE - SHARED MEMORY
15
const worker = new Worker('worker.js');
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const sharedArray = new Int32Array(sharedBuffer);
for (let i = 0; i < 10; i++) sharedArray[i] = i && sharedArray[i - 1] + 2
worker.postMessage(sharedBuffer);
setTimeout(() => {
console.log('[MAIN] Change triggered.');
sharedArray[0] = 1337
}, 5000);
main.js
self.addEventListener('message', (message) => {
const sharedArray = new Int32Array(message.data);
console.log('[WORKER] First value is: ' + sharedArray[0]);
setTimeout(() => {
console.log('[WORKER] First value is now: ' + sharedArray[0])
}, 10000)
});
worker.js
[WORKER] First value is: 0
[MAIN] Change triggered.
[WORKER] First value is now: 1337](https://image.slidesharecdn.com/ecmascript2017-170609022155/85/ECMAScript-2017-15-320.jpg)
![EXAMPLE - ATOMICS
16
self.addEventListener('message', (message) => {
const sharedArray = new Int32Array(message.data);
console.log('[WORKER] First value is: ' + sharedArray[0]);
while (sharedArray[0] === 0);
console.log('[WORKER] Changed! New value is ' + sharedArray[0])
});
const tmp = sharedArray[0];
while (tmp === 123);
self.addEventListener('message', (message) => {
const sharedArray = new Int32Array(message.data);
console.log('[WORKER] First value is: ' + sharedArray[0]);
while (Atomics.load(sharedArray, 0) === 0);
console.log('[WORKER] Changed! New value is ' + sharedArray[0])
});
After compiler optimization](https://image.slidesharecdn.com/ecmascript2017-170609022155/85/ECMAScript-2017-16-320.jpg)
ECMAScript 2017
- 2. 2 StackOverflow(Tags) Github(PRs) Java is to JavaScript what Car is to Carpet.
- 3. AGENDA 3 Background ECMAScript 2016(AKA.ES 7) ECMAScript 2017(AKA.ES 8)
- 4. BACKGROUND 4
- 5. POSITION IN RADAR 5 ●ASSESS Worth of exploring the goal of understanding how it will affect your enterprise.
- 6. ECMA & TC 39 European Computer Manufacturers Association Technical Committee 39 TC 39 process 6
- 7. TC 39 PROCESS 7 Stage Purpose Post-Acceptance Changes Expected Implementation Types Expected 0 - Strawman • Allow input into the specification N/A N/A 1 - Proposal • Make the case for the addition • Describe the shape of a solution • Identify potential challenges Major Polyfills / demos 2 - Draft • Precisely describe the syntax and semantics using formal spec language Incremental Experimental 3 - Candidate • Indicate that further refinement will require feedback from implementations and users Limited: only those deemed critical based on implementation experience Spec compliant 4 - Finished • Indicate that the addition is ready for inclusion in the formal ECMAScript standard None Shipping https://tc39.github.io/process-document/
- 10. EXAMPLES - INCLUDES AND EXPONENTIATION 10 Exponentiation let number = 3; console.log(Math.pow(3, 2)); // 9 number **= 2; console.log(number); // 9 Includes const arr = [NaN, 1]; console.log(arr.indexOf(NaN)); // -1 console.log(arr.includes(NaN)); // true
- 11. 11 Why ES2016(ES7) is so small? http://2ality.com/2016/01/ecmascript-2016.html WHY ES2016(ES7) IS SO SMALL?
- 13. MAJOR FEATURES Async functions Shared memory and atomics 13
- 14. EXAMPLE - ASYNC FUNCTIONS 14 async function asyncFunc() { const result1 = await otherAsyncFunc1(); console.log(result1); const result2 = await otherAsyncFunc2(); console.log(result2); } function otherAsyncFunc1() { //return a promise } function otherAsyncFunc2() { //return a promise } function asyncFunc() { return otherAsyncFunc1() .then(result1 => { console.log(result1); return otherAsyncFunc2(); }) .then(result2 => { console.log(result2); }); } function otherAsyncFunc1() { //return a promise } function otherAsyncFunc2() { //return a promise } 1. Async functions always return Promises 2. The operator await is only allowed inside async functions
- 15. EXAMPLE - SHARED MEMORY 15 const worker = new Worker('worker.js'); const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10); const sharedArray = new Int32Array(sharedBuffer); for (let i = 0; i < 10; i++) sharedArray[i] = i && sharedArray[i - 1] + 2 worker.postMessage(sharedBuffer); setTimeout(() => { console.log('[MAIN] Change triggered.'); sharedArray[0] = 1337 }, 5000); main.js self.addEventListener('message', (message) => { const sharedArray = new Int32Array(message.data); console.log('[WORKER] First value is: ' + sharedArray[0]); setTimeout(() => { console.log('[WORKER] First value is now: ' + sharedArray[0]) }, 10000) }); worker.js [WORKER] First value is: 0 [MAIN] Change triggered. [WORKER] First value is now: 1337
- 16. EXAMPLE - ATOMICS 16 self.addEventListener('message', (message) => { const sharedArray = new Int32Array(message.data); console.log('[WORKER] First value is: ' + sharedArray[0]); while (sharedArray[0] === 0); console.log('[WORKER] Changed! New value is ' + sharedArray[0]) }); const tmp = sharedArray[0]; while (tmp === 123); self.addEventListener('message', (message) => { const sharedArray = new Int32Array(message.data); console.log('[WORKER] First value is: ' + sharedArray[0]); while (Atomics.load(sharedArray, 0) === 0); console.log('[WORKER] Changed! New value is ' + sharedArray[0]) }); After compiler optimization
- 17. MINOR FEATURES Object.entries() and Object.values() New string methods: padStart and padEnd Object.getOwnPropertyDescriptors() Trailing commas in function parameter lists and calls 17