JavaScript ES2018 Features With Examples

ES2018 a.k.a. ES9 features

Carlos Caballero
Jan 19 · 4 min read
Photo by Nijwam Swargiary on Unsplash

Today, we’re going to look at ECMAScript features from 2015:


Introduction

ES2018, a.k.a. ES9, is the version of ECMAScript corresponding to the year 2018. This version does not include as many new features as those that appeared in ES6 (2015). However, some useful features have been incorporated.

This article introduces the features provided by ES2018 in easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation.

Of course, it is necessary to have a basic knowledge of JavaScript to fully understand the best ones introduced.

The new JavaScript features in ES2018 are:

  • Lifting template literal restriction.
  • s (dotAll) flag for regular expressions.
  • Regexp named capture groups.
  • Rest/spread properties.
  • Regexp lookbehind assertions.
  • Regexp Unicode property escapes.
  • Promise.prototype.finally.
  • Asynchronous iteration.

Lifting Template Literal Restriction

The proposed solution is to set the cooked value to undefined for template values that contain illegal escape sequences.

The raw value is still accessible via .raw so embedded DSLs that might contain undefined cooked values can just use the raw string:


s (dotAll) Flag for Regular Expressions

Currently, the dot (.) in regular expressions doesn't match line terminator characters (before ES2018). The proposal specifies the regular expression flag /s.


Regexp Named Capture Groups

Numbered capture groups allow you to refer to a certain portion of a string that a regular expression matches.

Each capture group is assigned a unique number and can be referenced using that number, but this can make a regular expression hard to grasp and refactor.

A capture group can be given a name using the (?<name>...) syntax, for any identifier name.

The regular expression for a date then can be written as /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u. Each name should be unique.


Rest/Spread Properties

ECMAScript 6 introduces rest elements for array destructuring assignments and spread elements for array literals.

This version introduces analogous rest properties for object destructuring assignment and spread properties for object literals.


Regexp Lookbehind Assertions

There are two versions of lookbehind assertions: positive and negative.

Positive lookbehind assertions are denoted as (?<=...) and they ensure that the pattern contained within precedes the pattern following the assertion.

Negative lookbehind assertions are denoted as (?<!...) and, on the other hand, make sure that the pattern within doesn't precede the pattern following the assertion.


Regexp Unicode Property Escapes

JavaScript lets you match characters by mentioning the “names” of sets of characters. Additionally, you can match characters by mentioning their Unicode character properties inside the curly braces of \p{}.

This proposal solves all the above-mentioned problems:

  • It is no longer painful to create Unicode-aware regular expressions.
  • There is no dependency on runtime libraries.
  • The regular expressions patterns are compact and readable — no more file size bloat.
  • Creating a script that generates the regular expression at build time is no longer necessary.
  • Code that uses the Unicode property escapes stays up-to-date “automatically” from the developer’s point-of-view: whenever the Unicode standard gets an update, the ECMAScript engine updates its data.

Promise.prototype.finally

A finally callback execute logic once your Promise has been settled one way or the other. It has absolutely no impact on the value that your promise will resolve to.


Asynchronous Iteration

We introduce a variation of the for-of iteration statement which iterates over async iterable objects. An example usage would be:


Conclusion

JavaScript is a live language, and that is something very healthy for web development. Since the appearance of ES6 in 2015 we are experiencing a vibrant evolution in the language.

In this post, we reviewed the features that arose in ES2018 (a.k.a. ES9).

Although many of these features may not be essential for the development of your web application, they offer possibilities that could before be only achieved with tricks or a lot of verbosity.

Better Programming

Advice for programmers.

Carlos Caballero

Written by

Hi! My name is Carlos Caballero and I’m PhD. in Computer Science from Málaga, Spain. Teaching developers and degree/master computer science how to be experts!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade