New features in ES2021 JavaScript

Features of ES2021
- replaceAll()
- Promise.any
- &&=, ||= and ??=
- Numeric separators

String replaceAll() Method

JavaScript string has a replace() method. It can be used to replace a string with another string.

const txt = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";
const newTxt = txt.replace('dog', 'monkey');
console.log(newTxt); 
// Output "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

const txt = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";

const newTxt = txt.replace('dog', 'monkey');

console.log(newTxt);

// Output "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

The replace() method only replaces the first occurrence. That is the reason the second occurrence of dog is not replaced. We can use a regular expression to do full replacement using the same replace() method

const regex = /Dog/ig;
const txt = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";
const newTxt = txt.replace(regex, 'monkey');
console.log(newTxt);
// Output "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

const regex = /Dog/ig;

const txt = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";

const newTxt = txt.replace(regex, 'monkey');

console.log(newTxt);

// Output "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

String.prototype.replaceAll() is now available and it replaces all occurrences of string without using a regular expression.

Promise.any()

Promise.any() resolves if any of the supplied promises is resolved. Below we have 3 promises, which resolves at random times.

const py1 = new Promise((resolve, reject)=> { setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000)); }); 
const py2 = new Promise((resolve, reject)=> { setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000)); }); 
const py3 = new Promise((resolve, reject)=> { setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000)); });

const py1 = new Promise((resolve, reject)=> { setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000)); });

const py2 = new Promise((resolve, reject)=> { setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000)); });

const py3 = new Promise((resolve, reject)=> { setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000)); });

From py1, py2, py3 whichever is resolved first, that is taken by promise.any()

async function checkPromiseAny() {
   const response = await Promise.any([py1, py2, py3]);
   console.log(response); // Prints "A" or "B" or "C"
}

checkPromiseAny();

async function checkPromiseAny() {

const response = await Promise.any([py1, py2, py3]);

console.log(response); // Prints "A" or "B" or "C"

}

checkPromiseAny();

What if none of the promises resolve? In that case Promise.any throws an AggregateError exception. We need to catch it and handle it.

const pp = new Promise((resolve, reject) => reject());

try {
   (async function () {
    const response = await Promise.any([pp]);
    console.log(response);
   })();
} catch (error) {
   console.log(error.errors);
}

const pp = new Promise((resolve, reject) => reject());

try {

(async function () {

const response = await Promise.any([pp]);

console.log(response);

})();

} catch (error) {

console.log(error.errors);

}

Check the below example for more details.

Logical Assignment Operator

Logical assignment operator combines the below logical operations:

The above logical assignments can be combined with assignment operator.

let a = 1;
let b = 2;
a &&= b;
console.log(a); // 2

let a = 1;

let b = 2;

a &&= b;

console.log(a); // 2

Line no 3 can be explained as below:

a && (a = b);

1	a && (a = b);

In other way it can be written as:

if(a){
  a = b
}

if(a){

a = b

}

Explanation: Since a is a truthy value, it is assigned with the value of b, i.e. 2.

The way we did it of && operator, we can implement the same for || and ?? operators.

Logical assignment operator with ||

let a = 1;
let b = 2;
a ||= b;
console.log(a); // 1

let a = 1;

let b = 2;

a ||= b;

console.log(a); // 1

Line no 3 can be explained as below:

a || (a=b);

1	a \|\| (a=b);

Explanation: The assignment operation happens only if a is a falsy value. In the code, a contains 1 which is a truthy value and hence, assignment does not happen. That is why our code prints 1 in the console.

Logical assignment operator with ??

?? is Nullish Coalescing operator in JavaScript. It specifically checks if a value is null or undefined.

var a;
var b = a ?? 5;
console.log(b); // 5

var a;

var b = a ?? 5;

console.log(b); // 5

Line no 2 can be explained as – if the value of a is null or undefined the right hand side of ?? is evaluated and assigned to b.

Another example with = operator:

var a;
var b = 2;
a ??= b;
console.log(a); // 2

var a;

var b = 2;

a ??= b;

console.log(a); // 2

Line 3 can be described as follows:

a = a ?? (a = b);

1	a = a ?? (a = b);

Here the value of a is undefined. As a result, the phrase on the right side is evaluated and set to 2.

Underscores as Numeric Separator

ES2021 supports _ (underscore) which can be placed as numeric separator. Normally we write one billion as 1000000000, but with ES2021 _ support it can be written as 1000_000_000 in the code and it is easy to read.

const billion = 1000_000_000;
console.log(billion); // 1000000000

1 2	const billion = 1000_000_000; console.log(billion); // 1000000000

It is also supports floating pointer numbers.

let amount = 120_201_123.05; // 120201123.05
let expense = 123_450; // 123450
let fee = 12345_00; // 1234500

let amount = 120_201_123.05; // 120201123.05

let expense = 123_450; // 123450

let fee = 12345_00; // 1234500

It’s important to note that all numbers in JavaScript are floating-point numbers.

To see which ES2021 features are supported by Nodejs, visit https://node.green/.

August 28, 2022 CodeBuddy ES12, ES2021, JavaScript