A brief introduction to ES6 and ES7.

1. ECMASCRIPT 2017
彭洪伟
Max Peng - hwpeng@thoughtworks.com
1

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/

8. ECMASCRIPT 2016
8

9. FEATURES
Array.prototype.includes
Exponentiation operator (**)
9

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?

12. ECMASCRIPT 2017
12

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

18. hwpeng@thoughtworks.com
THANK YOU

19. REFERENCES
19
http://ecma-international.org/memento/TC39.htm
https://www.ecma-international.org/memento/history.htm
https://github.com/tc39
http://exploringjs.com/es2016-es2017/index.html
https://www.quora.com/What-is-the-difference-between-concurrency-and-
parallelism/answer/Vicky-Katara?srid=umS5Y
http://javascript.ruanyifeng.com/introduction/history.html
https://tc39.github.io/process-document/
http://2ality.com/2016/01/ecmascript-2016.html
http://lucasfcosta.com/2017/04/30/JavaScript-From-Workers-to-Shared-
Memory.html