In this article, we will be going through the new features available in the latest version of ECMAScript 2021 with some coding examples.

New Features:

1. String.replaceAll( )

Replaces all instances of the target string with the desired string.

const fact = "Javascript is the best web scripting language. Javascript can be used for both front end and backend";
 
console.log(fact.replaceAll("Javascript", "Typescript"));

Result:
"Typescript is the best web scripting language. Typescript can be used for both front end and backend";

In comparison with the previous replace( ) method which only replaces the first occurrence of the target string with the desired string.

const fact = "Javascript is the best web scripting language. Javascript can be used for both front end and backend";
 
console.log(fact.replace("Javascript", "Typescript"));

Result:
"Typescript is the best web scripting language. Javascript can be used for both front end and backend";

2. Promise.any( )

Promise.any() resolves as soon as any one of the supplied promises is resolved, unlike promise.all() which waits for all the promises to resolve. It’s basically the opposite of Promise.all().

This is what happens if one Promise is fulfilled:

const promises = [   
          Promise.reject('ERROR A'),           
          Promise.reject('ERROR B'),   
          Promise.resolve('result'), 
]; 

Promise
  .any(promises)
  .then((result) => assert.equal(result, 'result')); //true

This is what happens if all Promises are rejected:

const promises = [   
          Promise.reject('ERROR A'),  
          Promise.reject('ERROR B'),   
          Promise.reject('ERROR C'), 
]; 

Promise
  .any(promises)   
  .catch((aggregateError) => {
            assert.deepEqual(aggregateError.errors, 
            ['ERROR A', 'ERROR B', 'ERROR C']); //true
   });

3. Logical Assignment Operator

a ||= b  is equivalent to a || (a = b). (Short-circuiting).

Why not to this expression? a = a || b

Well, because for the former expression the assignment is only evaluated if a evaluates to false. Therefore, the assignment is only performed if it’s necessary. In contrast, the latter expression always performs an assignment.

Example a ||= b:

var a = 1;  
var b = 2;  
 
a ||= b;   

console.log(a); // 1

Example a &&= b:

var a = 1; 
var b = 2; 

a &&= b; 

console.log(a); // 2

Example a ??= b:

var a;  
var b = 2;   

a ??= b;   

console.log(a); // 2

4. Numerical Separators

We can now use Underscores ( _ ) as separators in number literals and bigInt literals. It will help developers to make their numeric literals more readable, as the underscore will basically act as a comma (used to provide separation between the different groups of digits) when we write numbers in our day-to-day lives.

let budget = 1000000000000 //can be written as the following..

let budget = 1_000_000_000_000; 

console.log(budget); //printed as regular numeric literal.

result:
1000000000000

I hope this article helped you to understand the latest ECMAScript release. Thanks for reading. If you have any questions, feel free to leave a comment.

Resources:

• https://dev.to/faithfulojebiyi/new-features-in-ecmascript-2021-with-code-examples-302h

• https://2ality.com/2020/09/ecmascript-2021.html