ECMAScript 6 is so 2015! Meet ES2016

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

Slide 1

Slide 1

ES6 is so 2015 meet ES2016!

Slide 2

Slide 2

Paul Verbeek

Slide 3

Slide 3

workingatbooking.com

Slide 4

Slide 4

nlhtml5.org

Slide 5

Slide 5

ES6 is so 2015 meet ES2016!

Slide 6

Slide 6

ECMA-262 (a timeline)

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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!

Slide 23

Slide 23

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!

Slide 24

Slide 24

The TC39 process AKA. bunch of white guys

Slide 25

Slide 25

The TC39 process

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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 31

Slide 31

ECMAScript 2016

Slide 32

Slide 32

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

Slide 33

Slide 33

Following slides will mostly contain code

Slide 34

Slide 34

Exponentiation Operator

Slide 35

Slide 35

x ** y

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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 39

Slide 39

Exponentiation Operator

Slide 40

Slide 40

Exponentiation Operator 14 52

Slide 41

Slide 41

Array.prototype.includes

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

Wait? includes ? Why not contains ?

Slide 47

Slide 47

Wait? includes ? Why not contains ?

Slide 48

Slide 48

Array.prototype.includes

Slide 49

Slide 49

Array.prototype.includes 14

Slide 50

Slide 50

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

Slide 51

Slide 51

Not really…

Slide 52

Slide 52

Stage 4: Finished Ready for standard, passes unit tests

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

Object.values / Object.entries

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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 62

Slide 62

Object.values / Object.entries

Slide 63

Slide 63

Object.values / Object.entries 14 51

Slide 64

Slide 64

String padding

Slide 65

Slide 65

String padding insert left-pad joke

Slide 66

Slide 66

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

Slide 67

Slide 67

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

Slide 68

Slide 68

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

Slide 69

Slide 69

String padding

Slide 70

Slide 70

String padding 10 14 52

Slide 71

Slide 71

Object.getOwnPropertyDescriptors()

Slide 72

Slide 72

Object.getOwnPropertyDescriptors()

Slide 73

Slide 73

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 74

Slide 74

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 75

Slide 75

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 }

Slide 76

Slide 76

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 77

Slide 77

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 78

Slide 78

Cloning objects const clone = Object.create(

Object.getPrototypeOf(obj),


 Object.getOwnPropertyDescriptors(obj)

);

Slide 79

Slide 79

Object.getOwnPropertyDescriptors()

Slide 80

Slide 80

Object.getOwnPropertyDescriptors() 51 10

Slide 81

Slide 81

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

Slide 82

Slide 82

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

Slide 83

Slide 83

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

Slide 84

Slide 84

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

Slide 85

Slide 85

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

Slide 86

Slide 86

SIMD.JS

Slide 87

Slide 87

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

Slide 88

Slide 88

SIMD SISD

Slide 89

Slide 89

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

Slide 90

Slide 90

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

Slide 91

Slide 91

SIMD.JS

Slide 92

Slide 92

SIMD.JS 14

Slide 93

Slide 93

Async functions

Slide 94

Slide 94

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


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

Slide 95

Slide 95

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 96

Slide 96

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 97

Slide 97

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'

Slide 98

Slide 98

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 '

Slide 99

Slide 99

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

Slide 100

Slide 100

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

Slide 101

Slide 101

Async functions

Slide 102

Slide 102

Async functions 14

Slide 103

Slide 103

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

Slide 104

Slide 104

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

Slide 105

Slide 105

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


'def', 
 );

Slide 106

Slide 106

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

Slide 107

Slide 107

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

Slide 108

Slide 108

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

Slide 109

Slide 109

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

Slide 110

Slide 110

Stage 1: Proposal (continued) Formally accepted proposal • String#matchAll

• Private Fields • WeakRefs • Frozen Realms • Cancelable Promises

Slide 111

Slide 111

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

Slide 112

Slide 112

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

Slide 113

Slide 113

Edge 14 is going to be awesome :-)

Slide 114

Slide 114

Edge 14 is going to be awesome :-)

Slide 115

Slide 115

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

Slide 116

Slide 116

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

Slide 117

Slide 117

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

Slide 118

Slide 118

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

Slide 119

Slide 119

workingatbooking.com

Slide 120

Slide 120

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

Slide 121

Slide 121

Questions?