ECMAScript 2018 (ES2018 or ES9) New Features -JavaScript

In January 2018, the TC39 committee released new set of changes to the ECMAScript standard, appropriately called ECMAScript 2018. These changes are listed as

Asynchronous Iteration

Basic idea of Asynchronous Iteration is a combination of an async function and a generator — essentially a generator you can await within.

Async function, Generator — what you are talking about ??

Ohhh…… Hold on, let me explain what I am talking about.

Generator function

Generator function is a function that can return a value and then continue the execution of the function at a later time. Whereas an ordinary JS function uses a return statement, the generator function uses a yield operator.

Regular functions return only one, single value (or nothing). But Generators can return (“yield”) multiple values, one after another, on-demand. They work great with iterables, allowing to create data streams with ease.

Syntax

Generator Example

To know more about generator function read Moz://a MDN web docs

To know more about generator function read MDN web docs

Async function

To fulfil Promise gap ES2017 released Async/await which is an improvement over promise and no more than a syntactic sugar.

To get a clear picture about what Async function is please visit my previous post ECMAScript ES7 & ES8 New Features -JavaScript or see below video

Let’s start our main conversation Asynchronous Iteration,

As I stated earlier, Asynchronous Iteration basic idea is to combine Async function and generator together which means

Asynchronous iteration = Async function + Generator

Syntax:

for-await-of means for-of iteration statement iterates over async iterable objects.

Example1: async iteration statement

for await (const line of readLines(filePath)) {
 console.log(line);
}

Example2: async generator functions

async function* readLines(path) {
    let file = await fileOpen(path);
    try {
        while (!file.EOF) {
            yield await file.readLine();
        }
    }
    finally {
        await file.close();
    }
}

Basic Terminology used in Asynchronous Iteration are : iterator, iterable, asyncIterator, generator, async etc.

To deep dive more into Asynchronous Iteration, please read articles Async iterators and generators, for await…of and TC39 official async iteration proposal

Important: Main agenda of this article is not to dive into deep but to give main idea what and why TC39 introduced new features.

rest/spread update:

As we all know rest and spread operator (…) both came when ES6 launched. But in ECMAScript 2018 these operators got more power.

• Earlier rest operator (…) only works for Array destructuring and in parameter definitions but after ECMAScript 2018 release rest operator works with object destructuring too.
• Earlier spread operator (…) only works in Array literals, in function and method calls but with this update spread operator start working in object literals too.

rest operator (…) in object destructuring

Syntactic restrictions for rest operator

The spread operator (…) in object literals

More details about this topic is available here.

New regular expression features:

This release brings 4 new features to regulars expressions

1) Named capture groups
2) Unicode Property Escapes
3) Lookbehind Assertions
4) Flag /s (dotAll)

Named capture groups

Prior to ES2018, in regular expression all capture groups were indexed by indexes. But after this update, we can name groups using <groupName>, that are stored inside groups key. For example

Old Implementation

If we see in above example, matchedObject has undefined value for groups.

New implementation

matchedObject has groups object with names which we have defined.

Unicode Property Escapes

Now we can search for characters by mentioning their Unicode character property inside of \p{}

You can check out more of the feature by clicking here.

Lookbehind Assertions

Prior to ES2018 only Lookahead assertion was supported by JavaScript but this release introduced the concept of ‘Lookbehind assertion’ with two different version e.g. positive and negative.

What is Lookahead assertion?

A Lookahead assertion inside a regular expression means: whatever comes next must match the assertion, but nothing else happens. That is, nothing is captured and the assertion doesn’t contribute to the overall matched string.

What is Lookback assertion?

Lookbehind assertions work like Lookahead assertions, but in the opposite direction. It has two different version explain as below

Positive Lookbehind assertions

For a Positive Lookbehind assertion, the text preceding the current location must match the assertion (but nothing else happens).

Negative Lookbehind assertions

A negative Lookbehind assertion only matches if the current location is not preceded by the assertion, but has no other effect.

Flag /s (dotAll)

This ES2018 feature overcome the limitation of dot (.) in regular expressions such as

Limitation of dot (.)

1. It doesn’t match astral (non-BMP) characters such as emoji.

2) It doesn’t match line terminator characters.

ES2018 introduces the regular expression flag /s (short for “singleline”), which leads to the dot matching line terminators. The long name of /s is dotAll.

Explore more here.

Promise.prototype.finally()

ES2018 introduces a new promise callback known as finally, that is always executed, no matter if then or catch is called.

Use case:

Most common use case is cleaning up after you are done with a resource.

Template Literal Revision

Prior to ES2018 release, JavaScript template literal has restrictions on escape sequences which make it problematic. ES2018 release lifted syntactic restriction related to escape sequences.

Lifting the restriction raises the question of how to handle template values that contain illegal escape sequences.

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

For example

Important: To know more about what template literals and tag functions are click here.

(See TC39 official template literal revision proposal here)

Before you say goodbye…

Thank you so much for taking your precious time to read this post.

Reach me @LinkedIn

Check out my other popular articles below! Please 👏 this article to share it!
ECMAScript ES7 & ES8 New Features -JavaScript
ECMAScript 2019 (ES2019 or ES10) New Features -JavaScript