What’s New in ES2018

Category: es2018, es6, es9, JavaScript, learn-modernjs, modernjs, modernjs-hub

In this article, I’ll cover the new features of JavaScript introduced via ES2018 (ES9), with examples of what they’re for and how to use them.

JavaScript (ECMAScript) is an ever-evolving standard implemented by many vendors across multiple platforms. ES6 (ECMAScript 2015) was a large release which took six years to finalize. A new annual release process has been formulated to streamline the process and add features quicker. ES9 (ES2018) is the latest iteration at the time of writing.

Technical Committee 39 (TC39) consists of parties including browser vendors who meet to push JavaScript proposals along a strict progression path:

Stage 0: strawman –
The initial submission of ideas.

Stage 1: proposal –
A formal proposal document championed by at least once member of TC39 which includes API examples.

Stage 2: draft –
An initial version of the feature specification with two experimental implementations.

Stage 3: candidate –
The proposal specification is reviewed and feedback is gathered from vendors.

Stage 4: finished –
The proposal is ready for inclusion in ECMAScript but may take longer to ship in browsers and Node.js.

ES2016

ES2016 proved the standardization process by adding just two small features:

The array includes() method, which returns true or false when a value is contained in an array, and
The a ** b exponentiation operator, which is identical to Math.pow(a, b).

ES2017

ES2017 provided a larger range of new features:

Async functions for a clearer Promise syntax
Object.values() to extract an array of values from an object containing name–value pairs
Object.entries(), which returns an array of sub-arrays containing the names and values in an object
Object.getOwnPropertyDescriptors() to return an object defining property descriptors for own properties of another object (.value, .writable, .get, .set, .configurable, .enumerable)
padStart() and padEnd(), both elements of string padding
trailing commas on object definitions, array declarations and function parameter lists
SharedArrayBuffer and Atomics for reading from and writing to shared memory locations (disabled in response to the Spectre vulnerability).

Refer to What’s New in ES2017 for more information.

ES2018

ECMAScript 2018 (or ES9 if you prefer the old notation) is now available. The following features have reached stage 4, although working implementations will be patchy across browsers and runtimes at the time of writing.

Asynchronous Iteration

At some point in your async/await journey, you’ll attempt to call an asynchronous function inside a synchronous loop. For example:

async function process(array) {
  for (let i of array) {
    await doSomething(i);
  }
}

It won’t work. Neither will this:

async function process(array) {
  array.forEach(async i => {
    await doSomething(i);
  });
}

The loops themselves remain synchronous and will always complete before their inner asynchronous operations.

ES2018 introduces asynchronous iterators, which are just like regular iterators except the next() method returns a Promise. Therefore, the await keyword can be used with for … of loops to run asynchronous operations in series. For example:

async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

The post What’s New in ES2018 appeared first on SitePoint.

blog