DEV Community

loading...
Cover image for Modern Javascript - III

Modern Javascript - III

sinhapiyush profile image Piyush Sinha Originally published at devdojo.com ・4 min read

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

pic
Editor guide
Collapse
sebring profile image
J. G. Sebring

Looking forward to logical assignments! Not that it adds so much as we could

x = x || y
Enter fullscreen mode Exit fullscreen mode

While I personally have no problem with it I feel like it has been considered a bit of a dirty hack. I assume using the new style will be more accepted now that it part of the language syntax.

Collapse
sinhapiyush profile image
Piyush Sinha Author

Yup official hacks will be globally accepted :p