JavaScript ES2021 New Features

JavaScript is an easy-to-learn scripting language that allows you to create dynamically updated content on web pages. JS has evolved so much in the course of time that now it’s almost everywhere, including front-end (React, Angular, or Sevlte), backend (Node.js, Express, or Next). It complies with the rules of the ECMAScript specification. ECMAScript 2021 is the 12^th edition of ECMAScript Language Specification.

ECMAScript is the widely used general-purpose programming language best known for wide usage for server and embedded applications. This blog will explain some new ECMAScript 2021 features with coding examples that you can expect from ECMAScript proposal status.

1. replaceAll() method

For replacing a substring from another string, we have a splice() and slice() method and replace() method.

The splice() and slice method take the individual parts of the string and then change them, which is time-consuming. So we use the replace() method, which replaces the first occurrence of a substring. But if we want to replace all instances of a substring with a new string, the replaceAll() method comes into play.

The replaceAll() method will allow you to replace all occurrences of a specific substring with another string altogether.

Syntax: String.prototype.replaceAll();

Let’s have one example:

In the str string, we want to replace LiveScript with JavaScript, so we generally use replace() method.

We can see replace method only replaces the first instance of LiveScript with JavaScript.

But if we want to replace all instances of LiveScript with JavaScript, we use the replaceAll() method.

2. Private Methods

We create private methods in JavaScript using the pound(#) sign.

Syntax: #methodName(){};

Let’s have one example of the private method:

In this example, we created a Java class that has two methods, showDataType() and showKeyword(), so we can see “I am data type” and “I am keyword” get logged on the console.

If we want to make a showDataType() a private method so that it is not accessible outside the scope of the class. We need to add a pound(#) sign before it.

Now showDataType() is a private method, and we need a public method to access it. So we created a showAll() public method to access showDataType() method.

3. Private Accessors

Private Accessors works very similarly to private methods. They also have the pound(#) sign.

Syntax: #method_name(){};

Let’s have one example of the private accessor:

In this example, we created a Student class that has two methods, Name() and Year(), and we can see “1995” get logged into the console.

If we make, get Year a private one by adding the pound(#) sign before it.

We can see the result on the console is undefined.

Because get Year() is a private method, and to access it, we need a public method. So we created the publicYear() public method.

4. Promise.any() and AggregateError

Promise.any() is opposite of Promise.all(). It resolves if any one promise resolved while Promise.all() waits for all the Promise to get resolved, and then it resolves.

Let’s have one example:

We have three promises promise1, promise2, promise3, that resolves at a random time as we have used the setTimeout() function to set the taken for a promise to resolve. We have also used Math.random to give the random time to the setTimeout function. So, we don’t know which promise resolves first.

The AggregateError comes into play when none of the promises resolves and Promise.any() throws an AggregateError exception. And we handle this exception through try and catch block.

Let’s have one example:

5. Logical Assignment Operators

JavaScript has added three new logical operators with the existing ones.

i) &&= operator

Let’s have an example to understand this:

We can make this code a little easier with the new logical assignment operator(&&=).

This operator means if the x has a true value, then variable x should be assigned with the value of y. That’s why the value of x is set to 2 and gets logged into the console.

ii) ||= operator

Let’s have an example to understand this:

We can make this code a little easier with the new logical assignment operator(||=).

This operator is the opposite of &&= operator. In this operator, if the x has a false value, then only the variable x will be assigned with the value of y.

iii) ??= operator

Let’s have an example to understand this:

In this operator, if the value of x is null or undefined, the right-hand side of “??” is evaluated and assigned to x.

6. Numeric Separators

Numeric Separators enable you to add an underscore between a group of digits to make their literals more readable. The underscore creates the visual separation between the numbers, making it easy for the human eye to read quickly, especially the long digits repetitions. Numeric separators don’t just work for integers, they also work for binary numbers, hex values, and regular number literals.

Let’s have some examples:

These underscores don’t do anything with the number itself. That’s why when we console.log the numbers. The number is still the same without any underscores.

7. Conclusion

That all the expected features to be implemented in JavaScript ECMAScript 2021. Hopefully, you found all the features helpful. This update doesn’t have more features, but these features will surely make your coding easier. So now it’s your turn to tell us which ECMAScript 2021 feature you will use in your next project in the comment section below.