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.
View Website
View Website
View Website
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.
Intl.ListFormat
The Intl.ListFormat object enables language-sensitive list formatting. The ListFormat object takes two parameters, both of them are optional. The first parameter is language (locale) and the second parameter is an options object that has two properties — style and type.
The Intl.ListFormat has a method called format(), which receives an array as an argument and format it in different ways that are language-dependent.
const list = ['Motorcycle', 'Bus', 'Car'];
// English
console.log(new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(list));
// Motorcycle, Bus and Car
console.log(new Intl.ListFormat('en', { style: 'short', type: 'disjunction' }).format(list));
// Motorcycle, Bus or Car
// Dutch
console.log(new Intl.ListFormat('nl', { style: 'long', type: 'conjunction' }).format(list));
// Motorcycle, Bus en Car
// German
console.log(new Intl.ListFormat('de', { style: 'long', type: 'conjunction' }).format(list));
// Motorcycle, Bus und Car
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 some of the new features coming to Javascript with ES2021.
Comments (0)