ECMAScript 6 is so 2015! Meet ES2016

A presentation at Node Interactive Amsterdam in September 2016 in Amsterdam, Netherlands by Jayne Mast

Slide 1

Slide 1

ES6 is so 2015, meet ES2016! Paul Verbeek, B ooking.com

Slide 2

Slide 2

workingatbooking.com

Slide 3

Slide 3

nlhtml5.org

Slide 4

Slide 4

ECMAScript

Slide 5

Slide 5

"ECMAScript was always an
unwanted trade name that sounds like a skin disease. https://mail.mozilla.org/pipermail/es-discuss/2006-October/000133.html Brendan Eich, creator of JavaScript

Slide 6

Slide 6

The TC39 process

Slide 7

Slide 7

The TC39 process Stage 0: Strawman Free-form ideas, reviewed in TC39 meetings Stage 1: Proposal Formally accepted proposal Stage 2: Draft Has description of syntax and semantics Stage 3: Candidate Spec text complete, has at least 2 implementations Stage 4: Finished Ready for standard, passes unit tests

Slide 8

Slide 8

ECMAScript 2016

Slide 9

Slide 9

ECMA-262 7 th edition The ECMAScript® 2016 Language Specification

Slide 10

Slide 10

Exponentiation Operator

Slide 11

Slide 11

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

Slide 12

Slide 12

Exponentiation Operator TP *

Slide 13

Slide 13

Array.prototype.includes

Slide 14

Slide 14

['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

Slide 15

Slide 15

['a', 'b', NaN].indexOf(NaN) >= 0; // false [‘ a', 'b', NaN].includes(NaN); // true [ , , ].indexOf(undefined) >= 0; // false [ , , ].includes(undefined ); // true

Slide 16

Slide 16

Wait? includes ? Why not contains ?

Slide 17

Slide 17

Array.prototype.includes

Slide 18

Slide 18

ECMA-262 8 th edition The ECMAScript® 2017 Language Specification

Slide 19

Slide 19

Not really…

Slide 20

Slide 20

Stage 4: Finished Ready for standard, passes unit tests • Object.values/Object.entries

• String padding

• Object.getOwnPropertyDescriptors()

• Async functions • Trailing commas in function parameter lists and calls https://github.com/tc39/proposals/blob/master/finished-proposals.md

Slide 21

Slide 21

Object.values / Object.entries

Slide 22

Slide 22

const obj = { name: 'Paul', age: 30 }; let keys = Object.keys(obj); 
 // ['name', 'age'] let value s = 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

Slide 23

Slide 23

Object.values / Object.entries 54 TP *

Slide 24

Slide 24

String padding

Slide 25

Slide 25

'1'.padStart(3, '0'); 
 // '001' 
 
 '1'.padEnd(3, '0'); 
 // '100' 'Node'.padEnd(9, 'JS'); 
 // 'Node JSJSJ' 'foo'.padStart(8); 
 // ' foo '

Slide 26

Slide 26

String padding 10 * *

Slide 27

Slide 27

Object.getOwnPropertyDescriptors()

Slide 28

Slide 28

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 } }

Slide 29

Slide 29

var o1 = { a: 1 }; 
 var o2 = { b: 2 }; 
 
 Object.assign(o1, o2); 
 console.log(o1); // { a: 1, b: 2 } C opying properties into an object

Slide 30

Slide 30

C opying properties into an object const 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 }

Slide 31

Slide 31

C opying properties into an object const 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 }

Slide 32

Slide 32

Cloning objects const clone = Object.create(

Object.getPrototypeOf(obj),


 Object.getOwnPropertyDescriptors(obj)

);

Slide 33

Slide 33

Object.getOwnPropertyDescriptors() TP 50 54 *

Slide 34

Slide 34

Async functions

Slide 35

Slide 35

function doSomethingAsync(callback) { 
 setTimeout( function () { 


if ( typeof callback === 'function') { 
 callback('something'); 
 } 
 }, 1000) 
 }

Slide 36

Slide 36

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'

Slide 37

Slide 37

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'

Slide 38

Slide 38

function doSomethingAsync() { 


return new Promise( function (resolve, reject) { 
 setTimeout( function () { 
 resolve('something'); 
 }, 1000) 
 }); 
 } 
 
 async function doWork() { 
 console.log('start'); 


let value = await doSomethingAsync(); 
 console.log(value); 
 } 
 
 doWork(); 
 console.log('working'); 
 // 'start' 
 // 'working' 
 // 'something'

Slide 39

Slide 39

function doSomethingAsync() { 


return new Promise( function (resolve, reject) { 
 setTimeout( function () { 
 resolve('something'); 
 }, 1000) 
 }); 
 } 
 
 async function doWork() { 
 console.log('start'); 


let value = await doSomethingAsync(); 
 console.log(value); 
 value += await doSomethingAsync(); 
 console.log(value); 
 } 
 
 doWork(); 
 console.log('working'); 
 // 'start' 
 // 'working' 
 // 'something' 
 // 'somethingsomething '

Slide 40

Slide 40

function doSomethingAsync() { 


return new Promise( function (resolve, reject) { 
 setTimeout( function () { 
 reject('you failed! hah!'); 
 }, 1000) 
 }); 
 } 
 
 async function doWork() { 
 console.log('start'); 


let value; 


try { 
 value = await doSomethingAsync(); 
 } catch (e) { 
 value = 'error: ' + e.message; 
 } 
 console.log(value); 
 } 
 
 doWork(); 
 console.log('working'); 
 // 'start' 
 // 'working' 
 // 'you failed! hah!'

Slide 41

Slide 41

https://ponyfoo.com/articles/ understanding-javascript-async- await

Slide 42

Slide 42

Async functions *

Slide 43

Slide 43

Tr a i l i n g c o m m a s i n
function parameter lists and calls

Slide 44

Slide 44

let obj = { 
 first: 'Jane', 
 last: 'Doe', 
 }; let arr = [ 
 'red', 
 'green', 
 'blue', 
 ]; 
 console.log(arr.length); // 3 In objects and arrays

Slide 45

Slide 45

In function parameter lists and calls function foo( 
 param1, 
 param2, 
 ) {} 
 
 
 foo( 
 'abc', 


'def', 
 );

Slide 46

Slide 46

Tr a i l i n g c o m m a s i n
function parameter lists and calls 10

Slide 47

Slide 47

Stage 3: Candidate Spec text complete, has at least 2 implementations • SIMD.JS - SIMD APIs + polyfill • Function.prototype.toString

revisio n • Lifting Template Literal Restriction

Slide 48

Slide 48

Status: https://github.com/tc39/ecma262 Specs: https://tc39.github.io/ecma262/

Slide 49

Slide 49

http://node.green

Slide 50

Slide 50

https://ponyfoo.com/ http://www.2ality.com/

Slide 51

Slide 51

workingatbooking.com

Slide 52

Slide 52

Slide 53

Slide 53

@_paulverbeek @nlhtml5 verbeek.p@gmail.com 4815162342

Slide 54

Slide 54

Questions?