What’s New in ES2021?
Tags: javascript, webdev, programming, codenewbie
Published: 2021-04-11 22:57:41

**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:

```js
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:

```js
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:

```js
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:

```js
(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:

```js
(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:

```js
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.