ECMAScript 6 is so 2015! Meet ES2016

A presentation at Take Off Conference 2016 in October 2016 in Lille, France by Jayne Mast

Slide 1

Slide 1

ES6 is so 2015 meet ES2016!

Slide 2

Slide 2

ES6 is so 2015 meet ES2016!

Slide 3

Slide 3

Paul Verbeek

Slide 4

Slide 4

workingatbooking.com

Slide 5

Slide 5

nlhtml5.org

Slide 6

Slide 6

ECMAScript

Slide 7

Slide 7

ECMAScript?

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 "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 10

Slide 10

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 11

Slide 11

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 12

Slide 12

ECMA-262 (a timeline) December 1995 March 1996 August 1996 June 1997 August 1998 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 13

Slide 13

The TC39 process AKA. bunch of white guys

Slide 14

Slide 14

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 15

Slide 15

ECMAScript 2016

Slide 16

Slide 16

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

Slide 17

Slide 17

Following slides will mostly contain code

Slide 18

Slide 18

Exponentiation Operator

Slide 19

Slide 19

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

Slide 20

Slide 20

Exponentiation Operator 52 TP 7

Slide 21

Slide 21

Array.prototype.includes

Slide 22

Slide 22

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

Slide 23

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

Slide 24

Slide 24

Wait? includes ? Why not contains ?

Slide 25

Slide 25

Array.prototype.includes

Slide 26

Slide 26

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

Slide 27

Slide 27

Not really…

Slide 28

Slide 28

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 29

Slide 29

Object.values / Object.entries

Slide 30

Slide 30

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

Slide 31

Object.values / Object.entries TP 7

Slide 32

Slide 32

String padding insert left-pad joke

Slide 33

Slide 33

'1'.padStart(3, '0'); 
 // '001' 
 
 '1'.padEnd(3, '0'); 
 // '100' ‘TakeOff'.padEnd(13, 'Conf'); 
 // ‘TakeOffConfCo' 'foo'.padStart(8); 
 // ' foo'

Slide 34

Slide 34

String padding " " "

Slide 35

Slide 35

Object.getOwnPropertyDescriptors()

Slide 36

Slide 36

const obj = { 
 [Symbol('foo')]: 123, 


get bar() { return 'abc' }, 
 }; 
 console.log(Object.getOwnPropertyDescriptors(obj)); /* 
 {
[Symbol('foo')]: {
value: 123, 
 writable: true, 
 enumerable: true, 
 configurable: true
}, 
 bar: {
get: [Function: bar], 
 set: undefined, 
 enumerable: true, 
 configurable: true
}
} */

Slide 37

Slide 37

const o1 = { a: 1 }; 
 const o2 = { b: 2 }; 
 
 Object.assign(o1, o2); 
 console.log(o1);
// { a: 1, b: 2 }

  1. Copying properties into an object

Slide 38

Slide 38

  1. Copying 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 39

Slide 39

  1. Copying 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 40

Slide 40

  1. Cloning objects const obj = { 
 [Symbol('foo')]: 123, 


get bar() { return 'abc' }, 
 };

const clone = Object.create( Object.getPrototypeOf(obj), 
 Object.getOwnPropertyDescriptors(obj) );

Slide 41

Slide 41

Object.getOwnPropertyDescriptors() 50 TP 7

Slide 42

Slide 42

Async functions

Slide 43

Slide 43


 
 doWork(); console.log('working'); 
 
 // 'working' 


Slide 44

Slide 44


 function doWork() { 
 console.log('start'); 
 
 
 
 } 
 
 doWork (); 
 console.log('working'); 
 // 'start' 
 // 'working' 


Slide 45

Slide 45

function doSomethingAsync(callback) { 
 } 
 
 function doWork() { 
 console.log('start'); 
 doSomethingAsync(); 
 } 
 
 doWork(); 
 console.log('working'); 
 // 'start' 
 // 'working'

Slide 46

Slide 46

function doSomethingAsync(callback) { 


if ( typeof callback === 'function') { setTimeout( function () { 
 callback('something'); 
 }, 1000); 
 } 
 } 
 
 function doWork() { 
 console.log('start'); 
 doSomethingAsync( function (value) { 
 console.log(value); 
 } ); 
 } 
 
 doWork(); 
 console.log('working'); 
 // 'start' 
 // 'working' 
 // 'something'

Slide 47

Slide 47

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 48

Slide 48

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 49

Slide 49

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 50

Slide 50

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 51

Slide 51

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

Slide 52

Slide 52

Async functions 55 " "

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

Stage 3: Candidate Spec text complete, has at least 2 implementations • SIMD.JS - SIMD APIs + polyfill • Function.prototype.toString revision • Lifting Template Literal Restriction • global • Rest/Spread Properties • Asynchronous Iteration

Slide 58

Slide 58

Edge is pretty awesome

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

workingatbooking.com

Slide 64

Slide 64

Slide 65

Slide 65

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

Slide 66

Slide 66

Questions?