JavaScript: What's New in ECMAScript 2020

New exciting features are coming for JavaScript!

Even if the final approval of the new ECMAScript 2020 (ES2020) language specification will be in June, you can start to take a look and try them right now!

Follow me in this article to explore what's new.

Dealing with Modules

Some important innovations concern modules. Among these, a feature that developers have been requesting for a long time is the dynamic import. But let's go in order and see them in detail.

Dynamic imports

The current mechanism for importing modules is based on static declarations like the following:

import * as MyModule from "./my-module.js";

This statement has a couple of constraints:

• all the code of the imported module is evaluated at the load time of the current module
• the specifier of the module (

  "./my-module.js"

  in the example above) is a string constant, and you can not change it at runtime

These constraints prevent loading modules conditionally or on-demand. Also, evaluating each dependent module at load time affects the performance of the application.

The new

import()

const baseModulePath = "./modules";
const btnBooks = document.getElementById("btnBooks");
let bookList = [];

btnBooks.addEventListener("click", async e => {
  const bookModule = await import(`${baseModulePath}/books.js`);
  
  bookList = bookModule.loadList();
});

This code shows how to load the

books.js

btnBooks

loadList()

“The long-awaited dynamic import is now available in JavaScript ES2020.”

Tweet This

Import meta data

The

import.meta

url

As an example, you could use the

import.meta.url

data.json

const dataUrl = new URL("data.json", import.meta.url);

In this case, the

import.meta.url

URL

data.json

New export syntax

The

import

import {value} from "./my-module.js";
import * from "./my-module.js";

In some cases, you may need to export objects imported from another module. A handy

export

export {value} from "./my-module.js";
export * from "./my-module.js";

This symmetry between import and export statements is convenient from a developer experience standpoint. However, a specific case wasn't supported before these new specifications:

import * as MyModule from "./my-module.js";

To export the

MyModule

import * as MyModule from "./my-module.js";
export {MyModule};

Now, you can get the same result with one statement, as shown below:

export * as MyModule from "./my-module.js";

This addition simplifies your code and keeps the symmetry between

import

export

Data Types and Objects

The new ES2020 specifications introduce a new data type, a standardized global object, and a few methods that simplify the developer's life. Let's take a look.

BigInt and arbitrary precision integers

As you know, JavaScript has only one data type for numbers: the

Number

Number.MAX_SAFE_INTEGER

Without going into the internal details of integer representation, there are situations where you may need a higher precision. Consider the following cases:

• interaction with other systems that provide data as 64-bit integers, such as GUIDs, account numbers, or object IDs
• result of complex mathematical calculations requiring more than 64 bits

The workaround for the first case is representing data as strings. Of course, this workaround doesn't work for the second case.

The new

BigInt

BigInt

n

const aBigInteger = 98765432123456789n;

You can also use the

BigInt()

Number()

const aBigInteger = BigInt("98765432123456789");

The

typeof

"bigint"

BigInt

typeof aBigInteger        //output: "bigint"

Keep in mind that

Number

BigInt

Number

BigInt

TypeError

You have to explicitly convert the

Number

BigInt

BigInt()

“The BigInt data type is a new 'big' addition to JavaScript.”

Tweet This

The matchAll() method for regular expressions

You have several ways to get all matches for a given regular expression. The following is one of these ways, but you can use other approaches:

const regExp = /page (\d+)/g;
const text = 'text page 1 text text page 2';
let matches;

while ((matches = regExp.exec(text)) !== null) {
  console.log(matches);
}

This code matches all the page x instances within the

text

exec()

["page 1", "1", index: 5, input: "text page 1 text text page 2", groups: undefined]
["page 2", "2", index: 22, input: "text page 1 text text page 2", groups: undefined]

The

matchAll()

String

const regExp = /page (\d+)/g;
const text = 'text page 1 text text page 2';
let matches = [...text.matchAll(regExp)];

for (const match of matches) {
  console.log(match);
}

The

matchAll()

The globalThis object

Accessing the global object requires different syntaxes, depending on the JavaScript environment. For example, in a browser, the global object is

window

self

global

This leads to issues when writing code intended to run in different environments. You might use the

this

undefined

The

globalThis

The Promise.allSettled() method

Currently, JavaScript has two ways to combine promises:

Promise.all()

Promise.race()

Both methods take an array of promises as an argument. The following is an example of using

Promise.all()

const promises = [fetch("/users"), fetch("/roles")];
const allResults = await Promise.all(promises);

Promise.all()

This behavior doesn't provide you with a direct way to get the result of all the promises when at least one of them is rejected. For example, in the code above, if

fetch("/users")

fetch("/roles")

The new

Promise.allSettled()

const promises = [fetch("/users"), fetch("/roles")];
const allResults = await Promise.allSettled(promises);
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

In particular, this code lets you know the reason for the failure of each rejected promise.

New operators

A couple of new operators will make it easier to write and to read your code in very common operations. Guess which ones?

The nullish coalescing operator

How many times you've seen and used expressions like the following?

const size = settings.size || 42;

Using the

||

null

undefined

For example, the

size

42

settings.size

0

settings.size

""

false

To overcome these potential issues, now you can use the nullish coalescing operator (

??

const size = settings.size ?? 42;

This grants that the default value

42

size

settings.size

null

undefined

Optional chaining

Consider the following example:

const txtName = document.getElementById("txtName");
const name = txtName ? txtName.value : undefined;

You get the textbox with

txtName

txtName

null

value

txtName

null

undefined

The optional chaining operator (

?.

const txtName = document.getElementById("txtName");
const name = txtName?.value;

As in the previous example, the

name

txtName.value

txtName

null

undefined

undefined

The benefits of this operator are much more appreciated in complex expressions like the following:

const customerCity = invoice?.customer?.address?.city;

You can apply the optional chaining operator also to dynamic properties, as in the following example:

const userName = user?.["name"];

In addition, it applies to function or method calls as well:

const fullName = user.getFullName?.();

In this case, if the

getFullName()

undefined

“The nullish coalescing operator and the optional chaining are now a reality in JavaScript.”

Tweet This

Using the New Features

Throughout this article, you got an overview of ES2020's new features, and you're probably wondering when you'll be able to use them.

According to caniuse.com, all recent major browsers but Internet Explorer already support the new features brought by ECMAScript 2020. However, at the time of writing, Safari is not supporting the new

BigInt

matchAll()

The latest version of Node.js supports all the features as well, including dynamic import for enabled ECMAScript modules.

Finally, also the latest versions of the most popular transpilers, like Babel and TypeScript, allow you to use the latest ES2020 features.

http://localhost:8080

auth0-spa-js

npm install @auth0/auth0-spa-js

import createAuth0Client from '@auth0/auth0-spa-js';

let auth0Client;

async function createClient() {
  return await createAuth0Client({
    domain: 'YOUR_DOMAIN',
    client_id: 'YOUR_CLIENT_ID',
  });
}

async function login() {
  await auth0Client.loginWithRedirect();
}

function logout() {
  auth0Client.logout();
}

async function handleRedirectCallback() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  if (!isAuthenticated) {
    const query = window.location.search;
    if (query.includes('code=') && query.includes('state=')) {
      await auth0Client.handleRedirectCallback();
      window.history.replaceState({}, document.title, '/');
    }
  }

  await updateUI();
}

async function updateUI() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  const btnLogin = document.getElementById('btn-login');
  const btnLogout = document.getElementById('btn-logout');

  btnLogin.addEventListener('click', login);
  btnLogout.addEventListener('click', logout);

  btnLogin.style.display = isAuthenticated ? 'none' : 'block';
  btnLogout.style.display = isAuthenticated ? 'block' : 'none';

  if (isAuthenticated) {
    const username = document.getElementById('username');
    const user = await auth0Client.getUser();

    username.innerText = user.name;
  }
}

window.addEventListener('load', async () => {
  auth0Client = await createClient();

  await handleRedirectCallback();
});

<p>Welcome <span id="username"></span></p>
<button type="submit" id="btn-login">Sign In</button>
<button type="submit" id="btn-logout" style="display:none;">Sign Out</button>

Summary

At the end of this quick journey, you learned the new amazing features you can use in JavaScript. Although the final specifications will be approved in June, you do not have to wait. Most popular JavaScript environments are ready. You can use them right now!