ES2021 (or ES12) is the ECMAScript version corresponding to the year 2021. This version doesn’t introduce as many new features as those that appeared in ES6, back in 2015. Nonetheless, some valuable features have been included.
Before moving on, let me clarify something. This article was written on February 12, 2021, based on the ES2021 Release Candidate. The features listed in that release require approval from the ECMA General Assembly and such approval is expected to be granted by June 2021. From that moment, these features will be—officially—part of the standard per se.
It's worth mentioning that—at the time of writing—all of the features enumerated here are supported by the Google Chrome Canary build. You're free to try them all there.
Without further ado, let's review the most interesting features that the new version of the specification makes available to us.
1. Logical Assignment Operators
The new logical assignment operators—
??= combine the logical operations with the assignment operation. They are positively similar to the current logical operators and are very helpful for assigning default values to variables.
Logical AND Assignment Operator (
The logical AND assignment operator is the antithesis of the logical OR assignment operator. In the expression
x &&= y,
y is assigned to
x, if and only if
x is a truthy value. Otherwise, it preserves its initial value.
Logical OR Assignment Operator (
The logical OR assignment operator is, in turn, the antithesis of the logical AND assignment operator. It is s a short-circuit operation just like the logical OR operator (
x ||= y is identical to the expression
x || (x = y). This means that
y will be assigned to
x, if and only if
x represents a falsy value. Otherwise, it preserves its initial value.
Logical nullish Assignment Operator (
The logical nullish assignment operator only assigns
x is nullish (i.e., if
x is either
In this example, the output is
userDetails.key does not exist in the response object (i.e., it is
This is a suitable method that addresses a particular shortage in
String.replace(): the inability to replace all the occurrences of a pattern with a new string (in that case, one had to make use of regular expressions to achieve such a task).
Now, with the introduction of
String.replaceAll() to the language, we can easily replace all occurrences of a given string.
Syntax of the
String.replaceAll() method returns a new string in which all occurrences of a pattern are replaced by a replacement passed to it. The
pattern parameter can either be a string or a regex pattern, and the
replacement parameter can either be a string or a function that creates a new string to replace the pattern. This method operates without altering the old string.
At the time of writing, this method lacks support on Node.js, but most browsers already implemented it.
Syntax of the
Promise.any() takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, it returns a single promise that resolves with the value from that fulfilled promise. If no promises in the iterable fulfill (i.e., if all of the given promises are rejected), then the returned promise is rejected with an AggregateError, a new subclass of
Error that groups together individual errors. In essence, the
Promise.any() method is the opposite of
Now, back to the scenario in which none of the promises passed to
Promise.any() fulfills (which also takes into account the case where the iterator passed is empty), we need to catch the exception and handle it.
For demo purposes, we passed one to-be-rejected promise to
Promise.any(). As a result, the above code logs the following error in the console.
Promise.any() has a decent support on web browsers yet no implementation has been done on Node.js at the time of writing.
4. Numeric separator
ES2021 introduced the numeric separator to improve the readability of large numbers. As a result, we will be allowed to use the underscore (
_) character to separate number groups, just like we use commas to separate numbers in writing.
Take a look at the number
1197982359, which is the approximate number of live websites in 2020. At first, it's not particularly easy to spot that is a number of the billion order.
We can see that with cosmetic addition, the number can be read more easily.
Please note that this has no performance benefits at all.
1197982359 will still be exactly equal to
As for support, this feature is already implemented in most browsers and on Node.js since version 12.5.0.
Before exploring how this new constructor works, let's recall what the
Intl object is: a namespace for the ECMAScript Internationalization API, which supplies a collection of helper methods to support internalization efforts, like language-sensitive string comparison, number formatting as well as date and time formatting.
Intl.ListFormat object enables language-sensitive list formatting. Its constructor—
ListFormat—creates and returns a formatter object that (depending on the configuration passed upon creation) will join lists of strings using the best localized conventions.
Let's take a look at an example to better illustrate this.
The first (optional) argument for the
ListFormat constructor is the language to be used—
'en' for English in the example above. You can also pass an array of these BCP 47 Language Tags.
The second (also optional) parameter is an object with three (also optional) fields:
"localeMatcher"— sets the locale matching algorithm to be used; it can be either
"best fit"(which is the default one).
"style"— which affects the separators used to join the input strings, and can be either
"type"— regulates the format of the output message; it can be either
6. New options for
These new options allow us to control the length of the local-specific formatting of date and time strings.
Let's see some examples on how to use it when working with times...
... and with dates
We can also combine the two options to get a date-time string:
Although many of these features may not be significant for your development workflow, they address situations that could only be achieved before with tricks or great verbosity.