New Features in ECMAScript 2021 Update - GeeksforGeeks

14 Jul, 2021
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 also adopted for server and embedded applications.
New updates to ECMAScript will release out 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 works, 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 = 10New version:let x = 1;
x &&= 10; Output: x = 10
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, assignment does not happen. Here x contains 0 therefore assignment happens.Previous version:let x = 0;
x = x || 10; Output: x = 10 New version:let x = 0;
x ||= 10 Output: x = 10
Previous version:
let x = 0;
x = x || 10;
 Output:
 x = 10
 
New version:
let x = 0;
x ||= 10
 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
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.
// A billion dollar that I want to earn
const money = 1_000_000_000;

const money = 1_000_000_000.00;
 It also can be used for Binary, Hex, Octal bases.
3. String replaceAll(): 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: The Promise.any() method 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 = await Promise.any([
    promiseOne, promiseTwo, promiseThree
  ]);
  // If any of the promises was satisfied.
} catch (error) {
  console.log(error);
  // AggregateError: If all promises were rejected
}
 
Output:
await is only valid in async functions and the top-level bodies of modules
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: 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.
gfg.notShowMe is not a function
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: 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.
I am a geek
Hidden informations
6. Private Getters and Setters: Just like private methods, 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
JavaScript-Methods
javascript-operators
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?