ECMAScript 6 is so 2015! Meet ES2016

A presentation at RuhrJS 2016 in October 2016 in Bochum, Germany by Jayne Mast

ES6 is so 2015 meet ES2016!

Paul Verbeek

workingatbooking.com

nlhtml5.org

ES6 is so 2015 meet ES2016!

ECMA-262 (a timeline)

ECMA-262 (a timeline) December 1995 Announcement of JavaScript by Sun and Netscape

ECMA-262 (a timeline) December 1995 Announcement of JavaScript by Sun and Netscape

ECMA-262 (a timeline) December 1995 Announcement of JavaScript by Sun and Netscape

ECMA-262 (a timeline) December 1995 Announcement of JavaScript by Sun and Netscape "JavaScript will be the most effective method to connect HTML-based content to Java applets.
Bill Joy, co-founder Sun https://web.archive.org/web/ 20070916144913/http://wp.netscape.com/ newsref/pr/newsrelease67.html

ECMA-262 (a timeline) December 1995 March 1996 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript

ECMA-262 (a timeline) December 1995 March 1996 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript

ECMA-262 (a timeline) December 1995 March 1996 August 1996 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript "ECMAScript was always an
unwanted trade name that sounds like a skin disease.
Brendan Eich, creator of JavaScript https://mail.mozilla.org/pipermail/es-discuss/ 2006-October/000133.html

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 December 2009 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity ES5, strict mode, JSON, get/set, and more

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 December 2009 June 2011 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity ES5, strict mode, JSON, get/set, and more ES5.1, to align with ISO/IEC 16262 3rd edition

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 December 2009 June 2011 June 2015 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity ES5, strict mode, JSON, get/set, and more ES5.1, to align with ISO/IEC 16262 3rd edition ES6/ES2015, a lot of stuff!

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 199 8 December 1999 July 2008 December 2009 June 2011 June 2015 2016 Announcement of JavaScript by Sun and Netscape Netscape Navigator 2.0, with JavaScript Internet Explorer 3.0, with JScript First edition of ECMAScript ES2, to align with ISO/IEC 16262 ES3, added regex, try/catch and more ES4, Abandoned due to complexity ES5, strict mode, JSON, get/set, and more ES5.1, to align with ISO/IEC 16262 3rd edition ES6/ES2015, a lot of stuff! ES2016, not lot of stuff!

The TC39 process AKA. bunch of white guys

The TC39 process

The TC39 process Stage 0: Strawman Free-form ideas, reviewed in TC39 meetings

The TC39 process Stage 0: Strawman Free-form ideas, reviewed in TC39 meetings Stage 1: Proposal Formally accepted proposal

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

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

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

⚠
Following slides will mostly contain code

Exponentiation Operator

x ** y

x ** y Math.pow(x, y);

x ** y Math.pow(x, y); let squared = 2 ** 2;   // same as
2 * 2

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

Exponentiation Operator 14 52

Array.prototype.includes

['a', 'b', 'c'].indexOf('a') >= 0; // true ['a', 'b', 'c'].indexOf('d') >= 0; // false

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

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

Wait? includes ? Why not contains ?

Array.prototype.includes

Array.prototype.includes 14

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

Not really…

Stage 4: Finished Ready for standard, passes unit tests

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

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

Stage 4: Finished Ready for standard, passes unit tests • Object.values/Object.entries • String padding • Object.getOwnPropertyDescriptors()

Stage 4: Finished Ready for standard, passes unit tests • Object.values/Object.entries • String padding • Object.getOwnPropertyDescriptors() 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']

const obj = { name: 'Paul', age: 30 }; let keys = Object.keys(obj);   // ['name', 'age'] let value s = Object.values(obj);   // ['Paul', 30]

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

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

Object.values / Object.entries 14 51

String padding

String padding insert left-pad joke

'1'.padStart(3, '0');   // '001'     '1'.padEnd(3, '0');   // '100'

'1'.padStart(3, '0');   // '001'     '1'.padEnd(3, '0');   // '100' 'Ruhr'.padEnd(9, 'JS');   // 'RuhrJSJSJ'

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

String padding

String padding 10 14 52

Object.getOwnPropertyDescriptors()

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 }

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()

Object.getOwnPropertyDescriptors() 51 10

Stage 3: Candidate Spec text complete, has at least 2 implementations

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

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

Stage 3: Candidate Spec text complete, has at least 2 implementations • SIMD.JS - SIMD APIs + polyfill • Async functions • Trailing commas in function parameter lists and calls

Stage 3: Candidate Spec text complete, has at least 2 implementations • SIMD.JS - SIMD APIs + polyfill • Async functions • Trailing commas in function parameter lists and calls • Function.prototype.toString revisio n

SIMD.JS

SIMD (pronounced sim-dee) Single Instruction/Multiple Data

SIMD SISD

let a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0);   let b = SIMD.Float32x4(5.0, 6.0, 7.0, 8.0);   let c = SIMD.Float32x4.add(a, b); let d = SIMD.Bool32x4(1,0,0,1);     SIMD.Bool32x4.anyTrue(d);   SIMD.Bool32x4.allTrue(d);

Example http://peterjensen.github.io/mandelbrot/js/ mandelbrot-asm.html

SIMD.JS

SIMD.JS 14

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');  
var 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');  
var 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');  
var 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

Async functions 14

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 Trailing commas 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

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

Stage 2: Draft Has description of syntax and semantics • Asynchronous Iterators • function.sent metaproperty
• Rest/Spread properties • Shared memory and atomics
• System.global • Lifting Template Literal Restriction

Stage 1: Proposal Formally accepted proposal • export * as ns from “mod”; statements • export v from “mod”; statements • Class and Property Decorators • ArrayBuffer.transfer • Observable • String.prototype.{trimLeft,trimRight} • Class Property Declarations

Stage 1: Proposal (continued) Formally accepted proposal • String#matchAll
• Private Fields • WeakRefs • Frozen Realms • Cancelable Promises

Stage 0: Strawman Free-form ideas, reviewed in TC39 meetings • String.prototype.at • Zones • Object enumerables • Defensible Classes • Relationships • Structured Clone • Annex B - HTML Attribute Event Handlers • Reflect.isCallable/Reflect.isConstructor • Additional metaproperties
• Function Bind Syntax

Stage 0: Strawman (continued) Free-form ideas, reviewed in TC39 meetings • Do Expressions • RegExp additions • 64-Bit Integer Operations • Method Parameter Decorators • Function Expression Decorators
• Updates to Tail Calls to include an explicit syntactic opt-in

Edge 14 is going to be awesome :-)

Edge 14 is going to be awesome :-)

http://kangax.github.io/compat-table/esnext/

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

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

Let’s stop calling it ‘ECMAScript x’ and start call it JavaScript again!

workingatbooking.com

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

Questions?

Jayne Mast
@jayne

1 / 121

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?

In my talk I’m going to discuss the small new feature set of ES2016, and what might be coming in a future version. I’ll also be taking you through the ECMA-262 specification process.

Video