Latest Version of ECMAScript

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

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 new features introduced in 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

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 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

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

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

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

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.