New JavaScript Features
Categories: Java Script
New JavaScript Features ECMAScript 2021 (with examples)
ECMAScript 2021 is the version of ECMAScript corresponding to this year. There are some useful and awesome features that have been incorporated and used in our javascript projects
The new JavaScript features in ECMAScript 2021 are:
- Numeric separators
- String replaceAll
- Logical assignment operator
- And & Equals (&&=)
- OR & Equals (||=)
- Nullish Coalescing & Equals (??=)
- Promise.any
- Private class methods
- Private Getters and setters
- WeakRef
- Finalizers
Numberic separators
This new feature allows that numeric literals use underscores as separators to help to improve readability using a visual separation between groups of digits.
Example
// A billion
const amount = 1_000_000_000;
// Hundreds of millions
const amount = 1_475_938.38;
// 6234500 cents (62345 dollars)
const amount = 62345_00;
// 1,734,500
const amount = 1_734_500;
// 20^30000
const amount = 2e30_000;
// Also can be used for Binary, Hex, Octal bases
String.protype.replaceAll
Currently, there is no way to replace all instances of a substring without the use of global regexp (/regex/g). With the new method replaceAll that change that.
Example
Before (with regex)
const message = 'hello+this+is+a+message';
const messageWithSpace = message.replace(/\+/g, ' ');
// hello this is a message
After (with new method replaceAll)
const message = 'hello+this+is+a+message';
const messageWithSpace = message.replaceAll('+', ' ')
// hello this is a message
Logical assignment operator
Logical assignment operators combine logical operators and assignment expressions.
There are some new operators:
And & Equals (&&=)
OR & Equals (||=)
Nullish Coalescing & Equals (??=)
And & Equals (&&=)
Assign when the value is truthy. Also in the next table is explained.
With constants, x and y with a value of true when the constant has a value assigned and false in the opposite case.
Before
let a = 1;
if(a){
a = 8;
}
// Output: a = 8
After
let a = 1;
a &&= 3
// Output: a = 3
OR & Equals (||=)
Assign when the value is falsy. Also in the next table is explained.
With constants, x and y with a value of true when the constant has a value assigned and false in the opposite case
Before
// If conditional
let a = undefined;
if(!a){
a = 5;
}
// Output: a = 5
// OR
a = a || 3;
// Output: a = 3
After
let a = 0;
a ||= 3
// Output: a = 3
Nullish Coalescing & Equals (??=)
Assign when the value is null or undefined.
let a = undefined;
a ??= 7
// Output: a = 7
Promise.any method
The Promise.any() method returns a promise that will resolve as soon as one of the promises is resolved. If all of the promises are rejected, the method will throw an AggregateError exception holding the rejection reason
Example
const firstPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(), 1000);
});
const secondPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(), 2000);
});
const thirdPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(), 3000);
});
try {
const first = await Promise.any([
firstPromise, secondPromise, thirdPromise
]);
// Any of the promises was fulfilled.
} catch (error) {
console.log(error);
// AggregateError: All promises were rejected
}
Private class methods
Previously when was needed to declare a private method need to be added an underscore at the beginning of the method name (based on convention), however, that not guarantee that the method will be private. With ES2021 was added as a new feature the private class methods.