New Features in ECMAScript 2021 Update

ECMAScript is a part of JavaScript language which is mostly used in web technology, building websites, or web apps. ECMAScript is growing as one of the world's most widely used general-purpose programming languages. It is majorly used in embedding with web browsers and is also adopted for server and embedded applications.

New updates to ECMAScript will release this July. The new improvements are introduced to make JavaScript more powerful and also make working easy for developers. It provides new functions, simple ways to do complex work, and much more.

New updates: The new JavaScript features in ECMAScript 2021 are as follows.

1. Logical assignment Operators: Logical assignment operators introduce new operators which combine logical operators and assignment expressions.

And & Equals (&&=): It assigns when the value is truthy.

Previous version:

let x = 1;
if(x){
  a = 10;
}

Output:

x = 10

New version:

let x = 1;
x &&= 10;

Output:

x = 10

OR & Equals (||=): It assigns when the value is falsy. The assignment operation happens only if x is a falsy value. If x contains 1 which is a truthy value, an assignment does not happen. Here x contains 0 therefore assignment happens.

Previous version:

let x = 0;
x = x || 10;
console.log(x);

Output:

x = 10

New version:

let x = 0;
x ||= 10;
console.log(x);

Output:

x = 10

Nullish coalescing & Equals (??=): Symbol ?? is a nullish coalescing operator in JavaScript. It checks if a value is null or undefined.

let x;
let y = 10;
x ??= y;
console.log(x);
console.log(y);

Output: The value of x is undefined, therefore the right-hand side expression is evaluated and sets x to 10.

10
10

2. Numeric Separators: To improve readability and to separate groups of digits, numeric literals use underscores as separators. It also can be used for Binary, Hex, and Octal bases.

// A billion dollar that I want to earn
const money = 1_000_000_000;
console.log(money);

Output:

1000000000

3. JavaScript String replaceAll() Method: If we want to replace all instances of a substring in string then this new method replaceAll() is very useful.

const s = "You are reading JavaScript 2021 new updates.";
console.log(s.replaceAll("JavaScript", "ECMAScript"));

Output:

You are reading ECMAScript 2021 new updates.

4. Promise.any() Method: It returns a promise that will resolve as soon as one of the promises is resolved. It is the opposite of the Promise.all() method which waits for all promises to resolve before it resolves. What will happen when all the promises are rejected, The method will throw an AggregateError exception with the rejection reason. We have written the code inside a try-catch block.

const promiseOne = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 1000);
});

const promiseTwo = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 2000);
});

const promiseThree = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 3000);
});

try {
   const first = Promise.any([
    promiseOne, promiseTwo, promiseThree
  ]);
  // If any of the promises was satisfied.
} catch (error) {
  console.log(error);
  // AggregateError: If all promises were rejected
}

Output:

Uncaught (in promise) AggregateError: All promises were rejected

5. Private class methods: Private methods have scope inside the class only, so outside the class, they are not accessible.

Previous version:

class GfG {
  showMe() {
    console.log("I am a geek")
  }
  #notShowMe() {
    console.log("Hidden informations")
  }
}

const gfg = new GfG()

gfg.showMe()
gfg.notShowMe() 

Output:

Explanation: The error is shown as follows. This is because notShowMe() is now a private method inside the class GfG and can only be accessed via a public method inside the class

New version:

class GfG {
  showMe() {
    console.log("I am a geek");
  }
  #notShowMe() {
    console.log("Hidden informations");
  }
  showAll() {
    this.showMe()
    this.#notShowMe();
  }
}

const gfg = new GfG();
gfg.showAll();

Output:

I am a geek
Hidden informations

Explanation: We create a new public method called showAll() inside the class GfG. From this public method, we can access the private method #notShowMe() and since our new method is public we get the following result.

6. Private Getters and Setters: Just like privatemethods, now we can make getters and setters so that they can only be accessed inside a class or by instance created.

class GfG {
  get #Name() {
    return "GeeksforGeeks"
  }
  
  get viewName() {
    return this.#Name
  }
}

let name = new GfG();
console.log(name.viewName);

Output:

 GeeksforGeeks

animeshmaru16

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-operators
• JavaScript-Methods
• JavaScript-Questions

+1 More