What’s new in JavaScript ES2021 (ES12)

Introduce

Every year, Javascript updates add new features. ES2021 (also known as ES12) is expected to be released in June this year. New features added each year go through a four-stage process. All the features listed below, at the time of writing, have reached their final stage and are ready for release.

String.prototype.replaceAll

In Javascript, the replace() only replaces the first occurrence of a pattern in a string. If we want to replace all matches of a pattern in a string, the only way to achieve that is to provide the template as a regular expression

The replaceAll() suggestion method returns a new string with all matches of a pattern replaced with a replacement string.

Logical Assignment Operator

With the newly proposed logical assignment operators &&= , ||= , ??= – we can assign a value to a variable based on a logical operation. It combines logical math with assignment expression.

Logical assignment AND ( &&= )

The logical AND assignment operator performs the assignment only when the left truthy is truthy . Conversely, if the left falsy is falsy ( false , 0 , -0 , 0n , “” , null , undefined and NaN ), the assignment is not performed.

It can be understood simply as if(x) { x = y; }

The logical assignment OR ( ||= )

The logical OR assignment operator performs assignment only when the left falsy is falsy ( false , 0 , -0 , 0n , “” , null , undefined and NaN ). Otherwise, if the left truthy is truthy , the assignment will not be performed.

Same as if(!x) { x = y; }

Nullish ( ??= ) logic assignment

The Logic Nullish assignment operator only performs assignment when the left operand is empty ( undefined or null ). Otherwise will not.

It can be understood like this if(x == null || x == undefined) { x = y; }.

Numeric Separators

Large numeric characters are difficult to parse quickly by the human eye. For example, consider the number 1019436871.42. We must pay close attention to see it, and confusion is inevitable.

To improve readability, this new addition to the Javascript language allows underscores as separators in numeric characters. We could rewrite the same number as 1_019_436_871.42. And it works for all types of digits:

Note: it does not affect results, only improves readability.

Intl.ListFormat

An Intl.ListFormat object allows for the formatting of a language-sensitive . The ListFormat object takes two parameters, both of which are optional. The first parameter is language (locale) and the second is an options object with two properties – style and type

Intl.ListFormat has a method called format() , which takes an array as an argument and formats it in different ways depending on the language.

Promise.any

ES2021 will introduce the Promise.any() method as short-circuits and return a value, right after the first Promise resolved from the list / array of Promise . If all Promise are rejected , it will throw an AggregateError , an individual SubClass grouped together.

Unlike the Promise.race() method that focuses on the Promise rejected on the first thing, the Promise.any() focuses on the Promise resolved first.

summary

As a developer, it is important to stay up to date with new features of a language. I hope that I was able to introduce you to some new Javascript features with ES2021. Thank you for reading

Source: here