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.