What's new in ES2017

WebExpo 2017

Ondřej Žára, @0ndras

ES2017 = ES8 = JS

JavaScript language follows the ECMAScript (ES) specification
ES versions are numbered both by year and edition
Eight edition was finalized in June 2017
Previous version (ES2016) brought only two minor features
Developers not always enthusiastic about bleeding-edge news

ES2017 Overview

Major features: async functions, shared memory
Minor features: mostly to make the standard library consistent
Some are cool, some are boring
Always backwards compatible
Can be transpiled/polyfilled (exception: shared memory)

Async functions

Another evolutionary step in asynchronous execution flow
Modern JavaScript is based on non-blocking functions
Controlling flow (and error propagation) can be tricky
This was tackled in different ways in the past

History I: JavaScript Dark Ages

Nobody really knew how JS works
There were not many async APIs
More interest in browser compatibility, less in language design

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 () => {}

Async functions always return a Promise
Non-promise values are wrapped
Thrown exceptions are converted to a rejected promise

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
}

For non-promise-returning functions, await does nothing
For promise-returning functions, await interrupts the execution and waits for fulfillment
If an awaited promise gets rejected, await throws

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:

Was not available until Web Workers
Web Workers are highly isolated
Nothing is shared, every Worker has its own environment
Communication via message passing

Shared memory and atomics

Passing data between Workers:

~2009: Strings
~2011: Objects (structured cloning)
~2013: Transferrables (sending party loses control)
⇒ still not suitable for many tasks

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

SharedArrayBuffers correspond to a memory that is truly shared across multiple workers (threads)
This breaks the run-to-completion semantics of JavaScript
view[0] = view[0] + 1 // Race Conditions 101
To deal with synchronization issues, a new set of functions is available

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
Object.keys(obj): enumerable, only own
Object.getOwnPropertyNames(obj): non+enumerable, only own

All these variants iterate over property names (strings)

New object iteration

Object.values(obj)

Returns an array of all own values (consistent with Object.keys)

Object.entries(obj)

Returns an array of all [key, value] pairs (also consistent)

Listing property descriptors

What are property descriptors?

Plain objects that describe metadata for object properties
let descriptor = { enumerable: false, get: Math.random } Object.defineProperty(myObj, "key", descriptor) Object.defineProperties(myObj, {"key":descriptor}) Object.create(proto, {"key":descriptor})

Listing descriptors

Previously: Object.getOwnPropertyDescriptor(obj, "key")
New in ES2017: Object.getOwnPropertyDescriptors(obj)
Useful for:
- Cloning/copying arbitrary objects
- Having a symmetric counterpart to Object.defineProperties

Trailing commas

Where are trailing commas already allowed (and ignored)?

Arrays: [a, b, c, ]
Objects: {key: value, }

New in ES2017: argument lists

Parameter definition: function x(a, b, c, )
Function invocation: x(a, b, c, )

String padding

When	Event
November 2015	First draft of the `padStart/padEnd` proposal
March 2016	`left-pad` incident
June 2017	`padStart/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   "

What's new in ES2017