ES2018: What’s new in JavaScript? [State of the Web]

JavaScript has come a long way from its origins in 1995 to the revolution of ES2015. Thanks to Babel we can enjoy the comfort and many features of ES2015 and the following releases in 2016 and 2017—even in outdated browser versions. Of course, that is not the end. ES2018 is already here and ES2019 is on its way. Lets take a look.

Introduction

This article is part of our State of the Web format we publish on a regular basis. Check out our other articles about the newest tech related stuff on the web.

ES2018

Template literals revision

Template literals were a really great addition to JavaScript. But they have problems with some string sequences after backslashes:

• \u: unicode escape
• \x: hex Escape
• \ with following digits: octal escape

If you try to use \unicode in a template literal, you will get a syntax error due to an invalid unicode escape sequence.

The proposed solution in ES2018 is to use a template tag function.

The template tag function tagDemo will receive the strings as arguments while the string has a „cooked“ representation and the property raw lets you access the raw string. If you use an invalid escape sequence, the „cooked“ version will be undefined and the raw version will contain the plain text version of the string.

But template tag functions can also be used to manipulate template literals. A tag functions gets two parameters: an array of strings separated by the expressions and the expression values. The following example shows you how to use a tag function to transform the expression values to uppercase.

Supported platforms: latest browsers (except Edge), Node.js >= 8.10

Promise.prototype.finally()

You need to do something regardless of the outcome of a promise? No problem, finally() will be called always after everything else is finished.

Supported platforms: Babel, latest browsers (except Edge)

Rest properties for objects

The rest operator ... can now be used to extract properties from objects. You can even use it to filter certain properties from an object without iterating it.

Supported platforms: Babel, latest browsers (except Edge), Node.js >= 8.3

Spread properties for objects

You want to put all properties of an object into a new object? Here you go, the spread operator ... is you new best friend.

Supported platforms: Babel, latest browsers (except Edge), Node.js >= 8.3

Asynchronous iteration

With the support of async/await in for-loops, it is now much more elegant to iterate an array of promises and resolve them.

Supported platforms: Babel, latest browsers (except Edge and Firefox), Node.js >= 8.10 (Feature Flag)

RegExp unicode property escapes

Matching unicode characters in regular expressions can be quite a pain. ES2018 to the rescue! The new unicode property escape \p allows you to match unicode characters, groups (languages) and even emojis.

Supported platforms: Babel, latest browsers (except Edge and Firefox), Node.js >= 8.3 (Feature Flag)

RegExp s flag (dotAll)

Dots are supposed to match a single character. Unfortunately this does not work with line terminator characters like \n or \r. The new s flag (aka dotAll) fixes this problem.

Supported platforms: Babel, latest browsers (except Edge and Firefox), Node.js >= 8.10

RegExp lookbehind assertions

A lookbehind assertion allows you to make sure that a certain string exists directly in front of another string.

Supported platforms: Chrome >= 62, Node.js >= 8.10

RegExp named capture groups

Regular expressions with many groups can be tedious to manage. Thankfully ES2018 adopts named groups from other languages like Ruby, Java and many more.

Supported platforms: Babel, latest browsers (except Edge and Firefox), Node.js >= 8.10 (Feature Flag)

The future aka ES2019

ECMAScript releases are managed by the Ecma TC39 committee. Each new feature goes through five stages (from 0 to 4). Only proposals in stage 4 will be included in a new release. Stage 3 proposals aren’t ready yet and need refinement, but some of them are likely to have advanced onto stage 4 when a new release is finalized.

Finished (stage 4)

Optional Catch Binding

A catch-block always had to bind the error to a variable. Many developers just named the variable unused or something similar if they didn’t want to use it. ES2019 makes this obsolete.

Supported platforms: latest browsers (except Edge)

JSON superset

JSON should be a consistent experience across JSON files and JavaScript, but there is a caveat: a JSON string can contain unescaped U+2028 LINE SEPARATOR or U+2029 PARAGRAPH SEPARATOR characters while ECMAScript strings cannot.

With ES2019 this problem will be fixed. Both unescaped characters are allowed to exist in ECMAScript strings.

Supported platforms: none at the moment

Candidates (stage 3)

Here is a list of features that could be really useful and will hopefully make it into the final release:

• Big integers
• Private instance methods and accessors
• Class public instance fields and private instance fields
• Static class fields and private static methods
• Array.prototype.flat and Array.prototype.flatMap
• String.prototype.trimStart, String.prototype.trimEnd and String.prototype.matchAll
• Global placeholder global unified in browsers, Node.js and V8 shells

Conclusion

JavaScript has exciting new features and will get even more in the future. Especially things like the rest/spread operators and Promise.prototype.finally() are extremely useful. The other additions allow us to write less and more precise code and if you’re using RegExp heavily, ES2018 should make your developer life a lot easier.

Most of the new features are already covered by modern browsers and for everything else there is Babel. With babel-preset-env it’s really simple to add a list of platforms you have to support—Babel will include necessary polyfills automatically.

If you need more detailed information on ES2018 and ES2019 compatibility of your preferred platforms—Compat Table has you covered.