JS ES2021 - It's Almost Here

JS ES2021 - It's Almost Here

Piyush Sinha's photo
Piyush Sinha

Published on May 23, 2021

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Every year, Javascript update adds new features. ES2021 (also known as ES12) is planned to be released in June this year. New features that are added each year go through a four-stage process. All the features listed below, at the time of writing have already reached the last stage and are very much ready for the release.

String.prototype.replaceAll

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

const str = "macOS is way better than windows. I love macOS.";
const newStr = str.replace("macOS", "Linux");
console.log(newStr);
// Linux is way better than windows. I love macOS.

const newStr2 = str.replace(/macOS/g,"Linux");
console.log(newStr2);
// Linux is way better than windows. I love Linux.

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

const str = "macOS is way better than windows. I love macOS.";
const newStr = str.replaceAll("macOS", "Linux");
console.log(newStr);
// Linux is way better than windows. I love Linux.

Logical Assignment Operator

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

Logical AND assignment (&&=)

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

let x = 10;
let y = 15;

x &&= y;
// Equivalent: x && (x = y)

console.log(x);
// 15

x = 0;
x &&= y;
console.log(x);
// 0

If it’s hard to grasp the operator, think of it as if(x) { x = y; }.

Logical OR assignment (||=)

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

let x = null;
let y = 15;

x ||= y;
// Equivalent: x || (x = y)

console.log(x);
// 15

x = 10;
x ||= y;
console.log(x);
// 10

If it’s hard to grasp the operator, think of it as if(!x) { x = y; }.

Logical Nullish assignment (??=)

The Logical Nullish assignment operator performs the assignment only when the left operand is nullish(undefined or null). Otherwise, the assignment is not performed.

let x = null;
let y = 15;

x ??= y;
// Equivalent: x ?? (x = y)

console.log(x);
// 15

x = 10;
x ??= y;
console.log(x);
// 10

If it’s hard to grasp the operator, think of it as if(x == null || x == undefined) { x = y; }.

Numeric Separators

Large numeric literals are difficult for the human eye to parse quickly. For example, consider the number 1019436871.42. We have to pay close attention to see that it’s billion something.

To improve the readability, this new addition to Javascript language enables underscores as separators in numeric literals. We can re-write the same number as 1_019_436_871.42. And it works for all kinds of numeric literals:

// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000
// A decimal literal with its digits grouped per thousand:
1_000_000.220_720
// A binary integer literal with its bits grouped per octet:
0b01010110_00111000
// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000
// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73
// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n

Note: It does not affect the outcome. Just improves readability.

WeakRef

In JavaScript, the object is not collected by the garbage collector as long as a reference to that object exists. It stops the garbage collector from re-claiming the memory. ES12 is coming with a solution - WeakRef.

A WeakRef object contains a weak reference to an object, which is called its target or referent. Unlike a strong reference, it doesn't prevent the object from being collected by the garbage collector.

We can create a Weak Reference by using new WeakRef():

const myObject = new WeakRef({
     name: "John Doe",
     gender: "Male",
     age: "24"
});

myObject.deref();
// {name: "John Doe", gender: "Male", age: "24"}
myObject.deref().name;
// "John Doe"

The WeakRef can be useful in some cases, the TC39 Proposal advises avoiding it if possible.

Promise.any

ES2021 will introduce Promise.any() method which short-circuits and returns a value, as soon as it hits the first resolved promise from the list/array of promises. If all the promises are rejected then it will throw an AggregateError, a new subclass of Error that groups together individual errors.

Unlike the Promise.race() method which focuses on the promise which settles the first, the Promise.any() method focuses on the promise which resolves the first.

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));
// quick
const promise1 = Promise.reject(0);
const promise2 = Promise.reject(0);
const promise3 = Promise.reject(0);

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));
// AggregateError: All promises were rejected

Conclusion

As a developer, it is important to stay up to date with the new features of a language. I hope I was able to introduce you to the new features coming to Javascript with ES2021.

References

Did you find this article valuable?

Support Piyush Sinha by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this