Hello guys, welcome back. In this module, I will be discussing the latest version of ECMAScript. After reading this module, you will get to know about some of the new features introduced in ECMAScript 2021. In the previous module, I have discussed the difference between ES5 & ES2015. So, from our JavaScript tutorial, you may read it. Let’s start to know the current topic now.
Latest version of ECMAScript
Every year, ECMAScript or ES introduces some new features in JavaScript. ECMAScript has introduced its latest version ECMAScript 2021 in June 2021. Given below are some of the Latest Version of ECMAScript 2021:
- A new string method is known as string.replaceAll().
- Logical Assignment Operators.
- Numeric Separators
- Private class methods
- Private accessors, i.e., private getter & setter methods.
- Promise.any() method
- A new type of error known as Aggregate error is used for representing multiple errors at once.
Now, let’s know each one of them with an example.
New features of ECMAScript 2021
replaceAll() method
replaceAll() method is the Latest Version of ECMAScript. This method is used for replacing all the substrings with the new substring in the given string.
Syntax
String.replaceAll(substring1, substring2)
substring1 is the substring to be replaced & substring2 is the new substring.
let string = "This is a JavaScript tutorial. JavaScript is used as a front-end & backend for making interactive & dynamic websites.";
console.log(string.replaceAll("JavaScript", "ECMAScript"));
//Output
//This is an ECMAScript tutorial. ECMAScript is used as a front-end & backend for making
//interactive & dynamic websites.
Logical Assignment operators
Logical Assignment operators are the Latest Version of ECMAScript. Logical assignment operators provide new operators that combine logical operators with assignment expressions.
Logical assignment operators with logical AND (&&)
In the previous version,
let a = 10;
let b=4;
if(a){
a = b;
}
console.log('a='+a);
//Output
//a=4
In the latest version,
let a = 10;
let b=4;
a &&= b;
console.log('a='+a)l
//Output
//a=4
Logical assignment operator with logical OR (||)
In the previous version,
let a=0;
a=a||5;
console.log('a='+a)l
//Output
//a=5
In the latest version,
let a=0;
a||=5;
console.log('a='+a)l
//Output
//a=5
Logical assignment operator with Nullish Coalescing Operator (??)
It checks whether a value is undefined or null.
let a;
let b = 5;
a ??= b;
console.log('a='+a);
//Output
//a=5
let a=null;
let b = 5;
a ??= b;
console.log('a='+a);
In the above two examples, the values of ‘a’ are undefined & null, so the value of b is assigned to a & hence, the output is a=5.
let a=8;
let b = 5;
a ??= b;
console.log('a='+a);
//Output
//a=8
In the above example, the value of ‘a’ is8, so the value of b is not assigned to a & hence, the output is a=8.
Numeric Separators
Numeric Separators is the Latest Version of ECMAScript. This new feature of ECMAScript (ES) helps to improve the readability of numerical literals by separating a group of digits with an underscore symbol (_). It may also be used for Hex, Octal, and Binary bases.
let money = 1_000_000_000_000;
console.log('Money='+money);
//Output
//Money=1000000000000
Private class methods
Private class methods are the Latest Version of ECMAScript. In ECMAScript 2021, we can make class methods private by using the hash (#) symbol before the function or method name when defining the function body.
class Person {
constructor(name, age){
this.name=name;
this.age=age;
}
showName() {
console.log(`My name is ${this.name}.`)
}
// private method
#showAge() {
console.log(`My age is ${this.age}.`)
}
}
const obj1 = new Person("Rohan Kesarwani",22);
obj1.showName()
obj1.showAge()
On executing the above we will be getting an error: Uncaught TypeError: obj1.showAge is not a function.
So, to execute the above program successfully, we can call the showAge() method inside the showName() method.
class Person {
constructor(name, age){
this.name=name;
this.age=age;
}
showName() {
console.log(`My name is ${this.name}.`)
this.#showAge();
}
#showAge() {
console.log(`My age is ${this.age}.`)
}
}
//Output
//My name is Rohan Kesarwani.
//My age is 22.
Private accessors i.e., getters & setters methods
Private accessors are the Latest Version of ECMAScript. Like private methods inside a class, we can also make private getter & setter methods by using the hash (#) symbol.
class Person {
get name() {
return "Rahul Sharma";
}
get #age() {
return 22;
}
}
let obj = new Person();
console.log(`Name: ${obj.name}`);
console.log(`Age: ${obj.age}`);
//Output
//Name: Rahul Sharma
//Age: undefined
In the above example, we are making the age() method private that’s why we are getting undefined as output when we are accessing age outside the class using an object, obj of a class Person.
We can get value by making another method public.
class Person {
get name() {
return "Rahul Sharma";
}
get #age() {
return 22;
}
get Age(){
return this.#age;
}
}
let obj = new Person();
console.log(`Name: ${obj.name}`);
console.log(`Age: ${obj.Age}`);
//Output
//Name: Rahul Sharma
//Age: 22
Promise.any() & Aggregate Error
Promise.any() & Aggregate Error is the Latest Version of ECMAScript. It is similar to the Promise.All() method which waits for all promises provided to be resolved before it resolves. Promise.any() method returns a single promise that resolves if any of the promises provided in the iterable (such as an array) has been resolved. If all the promises were rejected, then the promise returned is rejected with a new error known as Aggregate error.
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
reject();
}, 1000);
});
let p2 = new Promise(function(resolve, reject) {
setTimeout(function(){
reject();
}, 2000);
});
let p3 = new Promise(function(resolve, reject) {
setTimeout(function(){
reject();
}, 3000);
});
try {
let arr = await Promise.any([
p1, p2, p3
]);
} catch (error) {
// If all promises were rejected, then we will be getting an Aggregate error.
console.log(error);
}
//Output
//AggregateError: All promises were rejected
I hope after reading this module, you have got to know about some of the new features in the latest version of ECMAScript i.e., ECMAScript 2021. ECMAScript or ES introduces new features every year, so there will be more useful & interesting features that you will get to know in upcoming years.
