What's new in ES2017

What's new in ES2017

WebExpo 2017

Ondřej Žára, @0ndras

ES2017 = ES8 = JS

ES2017 Overview

Async functions

History I: JavaScript Dark Ages

History I: JavaScript Dark Ages

History II: Node.js

Also known as The Callback Hell

getData(function(err, data) { if (err) return displayError(err) processData(data, function(err, result) { if (err) return displayError(err) displayData(result, function(err) { if (err) return displayError(err) }) }) })

History IIIa: ES6 Promises

Readable, but gets hairy when additional arguments are passed to individual callbacks

getData().then( processData, displayError ).then( displayData, displayError ).then( null, displayError )

History IIIb: ES6 generators

Readable, but needs the additional MAGIC boilerplate that runs the generator and correctly links returned promises

let generator = function* () { try { let data = yield getData() let result = yield processData(data) yield displayData(result) } catch (err) { displayError(err) } } MAGIC(generator)

ES2017: async/await

The async keyword defines an async function:

async function A() {} let B = async function() {} let obj = { async C() {} } let D = async () => {}

ES2017: async/await

The await keyword can only be used inside of an async function:

async function A() { let b = await B() let c = await C(b) return c }

ES2017: async/await example

Promise-based code as readable as its synchronous counterpart

try { let data = await getData() let result = await processData(data) return displayData(result) } catch (err) { displayError(err) }

Shared memory and atomics

Parallel execution in JavaScript:

Shared memory and atomics

Passing data between Workers:

ES2017: SharedArrayBuffer

let sab = new SharedArrayBuffer(10) // bytes worker.postMessage(sab) let view = new Uint8Array(sab) view[0] = 42 // will be eventually visible from the worker

ES2017: SharedArrayBuffer

ES2017: Atomics

The Atomics namespace holds functions that operate on SharedArrayBuffers

load(), store()get/set values without instruction reordering
add(), sub(), and(), or(), xor()atomic arithmetics
exchange(arr, index, value)sets a new value, returns the old one
exchangeCompare(arr, index,
expected, value)
sets a new value if the old one matches the expected one
wait(arr, index, value, [timeout])blocks until a value is no longer present
wake(arr, index, count)wakes a given number of waiters

Functional object iteration

JS objects can be iterated in multiple ways:

for (let p in obj) {}
enumerable, including prototype
enumerable, only own
non+enumerable, only own

All these variants iterate over property names (strings)

New object iteration



Listing property descriptors

What are property descriptors?

Listing descriptors

Trailing commas

Where are trailing commas already allowed (and ignored)?

New in ES2017: argument lists

String padding

November 2015First draft of the padStart/padEnd proposal
March 2016left-pad incident
June 2017padStart/padEnd accepted into the standard

String padding API

Method names are chosen to be independent on writing direction

"test".padStart(7, "!?") // "!?!test" "test".padEnd(7) // "test "

Questions and answers