What’s New in ES2021?

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

ES2021 is the latest version of the EcmaScript specification as of 2021.

It has the newest features of JavaScript, which are being added into various runtime environments like browsers and Node.js.

In this article, we’ll look at the new features that come with ES2021.

String.prototype.replaceAll

The string instance’s replaceAll method is a new method that lets us replace all instances of a substring in a string.

To use it, we can write:

const newStr = 'foo bar foo bar'.replaceAll('foo', 'baz')
console.log(newStr)

Then newStr is 'baz bar baz bar’ .

We replace all instances of the string we passed in as the 1st argument with the string in the 2nd argument.

WeakRef

WeakRef is a constructor that lets us create objects that let us clean up whatever we pass into it manually.

For instance, we can write:

const obj = new WeakRef({
   foo: "bar"
 });
 console.log(obj.deref().foo);

We create a WeakRef instance by passing an object.

The constructor returns an object that has the same content as what we passed in.

But it also inherits the deref method that lets us remove the reference obj from memory manually.

deref returns the original content of obj .

So the console.log would log 'bar' .

Finalizers

Finalizers let us register callbacks that are run after an object is garbage collected.

For instance, we can write:

const registry = new FinalizationRegistry((value) => {
  console.log(value);
});

(() => {
  const obj = {}
  registry.register(obj, "bar");
})()

We create the registry with the FinalizationRegistry with a callback that’s called when an object that’s passed into registry.register is garbage collected.

We run the function that creates obj and pass that into registry.register with a value in the 2nd argument.

The value will be the value of value in the callback.

Therefore, we should see 'bar' logged after garbage collection is done on obj .

Promise.any()

Promise.any returns a promise that resolves if any supplied promise is resolved.

For instance, we can write:

(async () => {
  const result = await Promise.any([
    Promise.resolve(1),
    Promise.reject('error'),
    Promise.resolve(2)
  ]);
  console.log(result);
})();

We pass in an array of promises into Promise.any .

And since the first promise resolves to a value, Promise.any will return a promise that resolves to 1.

And result would therefore be 1.

If none of the promises resolves, then an AggregateError is raised.

So if we have something like:

(async () => {
  try {
    const result = await Promise.any([
      Promise.reject('error1'),
      Promise.reject('error2'),
      Promise.reject('error3'),
    ]);
    console.log(result);
  } catch (error) {
    console.log(error)
  }
})();

Then error would be 'AggregateError: All promises were rejected’ .

Logical Assignment Operator

With ES2021, we can combine the boolean operators && , || with the = operator to do the boolean operation on an existing variable with a new variable and assign it to the existing variable.

For instance, if we have:

let x = true;
const y = false;
x &&= y;
console.log(x)

Then x is false since x &&= y is the same as x = x && y .

We can do the same thing with || with the ||= operator.

Numeric Separator

The _ digit separator is now a standard in ES2021.

We can use _ to separate groups of digit for long numbers.

For instance, we can write 1_000_000 to write 1 million.

Conclusion

There’re many useful new features that comes with ES2021.