ECMAScript 6 is so 2015! Meet ES2016

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

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?

Jayne Mast
@jayne

1 / 54

Last year we read a lot about ES6, or ES2015. Some have started using it using Babel or other tools, and browsers have started implementing it.

But what about the new stuff happening this year? What about ES2016 (and further)? And how can you keep up to date by understanding the spec and its different stages?