ECMAScript 6 is so 2015! Meet ES2016

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

workingatbooking.com

nlhtml5.org

ECMAScript

"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

The TC39 process

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

ECMAScript 2016

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

Exponentiation Operator

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

Exponentiation Operator TP *

Array.prototype.includes

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

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

Wait? includes ? Why not contains ?

Array.prototype.includes

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

Not really…

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

Object.values / Object.entries

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

Object.values / Object.entries 54 TP *

String padding

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

String padding 10 * *

Object.getOwnPropertyDescriptors()

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

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

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 }

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 }

Cloning objects const clone = Object.create(

Object.getPrototypeOf(obj),


 Object.getOwnPropertyDescriptors(obj)

);

Object.getOwnPropertyDescriptors() TP 50 54 *

Async functions

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


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

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'

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'

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'

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 '

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

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

Async functions *

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

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

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


'def', 
 );

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

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

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

http://node.green

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

workingatbooking.com

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

Questions?