What are the six key features of JavaScript ES2021?

On every release, JavaScript adds some new methods and operators to make the JavaScript language more consistent and easy to use. In the ES12 version of JavaScript, 6 new functionalities are likely to be introduced.

ES2021 Features

• Logical Assignment Operator
• replaceAll method in String Object
• Promise.any
• Numeric Seperator
• dateStyle & timeStyle
• Intl.ListFormat

Logical assignment operator

There are three Logical Assignment Operators:

• &&= – Logical And Assignment
• ||= – Logical Or Assignment
• ??= – Nullish coalescing operator.

Logical and assignment

//syntax
x &&= y;
if x is true, then the value of y is assigned to x

//Example 
let x =10, y =20;
x &&= y;
console.log(x); // 20

x = undefined;
x &&= y;
console.log(x); // undefined

Logical or assignment

//syntax
x ||= y;
if x is false, then the value of y is assigned to x

//Example 
let x ='', y ="x is empty";
x ||= y;
console.log(x); // x is empty

x = 'asdf';
x ||= y;
console.log(x); //asdf

Nullish coalescing operator

The nullish coalescing operator returns the right-hand side operand if the left-side operand is null or undefined:

let a ;
a = a ?? 10;
console.log(a) 

// using shorthand assignment 
let x;
x ??= 100;
console.log(x); //100 

// only for null and undefined the right-side operand is assigned.
let emptyStr = '';
emptyStr ??= "Empty";
console.log(emptyStr); //''

replaceAll

The replaceAll method replaces all the occurrences of search string or regex with the replacement string passed. We can also pass a function that will be executed for each match in the source string.

let sentence = "She is my doctor. My doctor is 12 years old";

sentence.replaceAll("doctor", "daughter");

// the above can also be written as  
sentence.replaceAll("doctor", function(searchStr, matchedStrIndex,sourceString){
    return "daughter";
});

Promise.any

The Promise.any method takes an array of Promise objects as a parameter. If any one of the Promises get resolved, the resolved value will be returned.

const promises = [
  new Promise((resolve, reject) => setTimeout(reject, 20, '1st')),
  new Promise((resolve, reject) => setTimeout(resolve, 500, 'last')),
  new Promise((resolve,reject) => setTimeout(resolve, 200, '2nd'))
];

Promise.any(promises)
    .then(v => console.log(v))
    .catch(e =>console.log(e));

//In log 2nd will be printed 

We have created 3 promises:

• 1st promise rejects after 20 milliseconds
• 2n promise resolves after 500 milliseconds
• 3rd promise resolves after 200 milliseconds

So, in the above situation, the 3rd promise would be resolved first.

As soon as the 3rd Promise is resolved, the then block will be executed, and the 2nd will be logged in the console. The then block will not be executed again.

If all the promises are rejected, we will get an AggregateError.

Numeric Seperator(_)

Using _ we can separate numbers to improves the readability of large numbers:

let number = 1123; 
let numberWithSeperator = 1_123;

Intl.ListFormat

Using ListFormat, we can format an array with language-sensitive formatting:

const list = ['🍎 ', '🍪 ', '🍗 '];

 console.log(new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(list)); // 🍎 , 🍪  and 🍗

 console.log(new Intl.ListFormat('en', { style: 'short', type: 'conjunction' }).format(list)); // 🍎 , 🍪 , & 🍗 

 console.log(new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' }).format(list)); // 🍎 , 🍪 , 🍗 

//Italy lang 
 console.log(new Intl.ListFormat('it', { style: 'long', type: 'conjunction' }).format(list)); // 🍎 , 🍪  e 🍗 

dateStyle & timeStyle

With dateStyle and timeStyle, we can create language-sensitive date and time formatting as follows:

let dt = Date.now();
//medium
let timeStyleFormatter = new Intl.DateTimeFormat("en" , {
  timeStyle: "medium"
});
timeStyleFormatter.format(dt); //"5:25:05 PM"

//short
timeStyleFormatter = new Intl.DateTimeFormat("en" , {
  timeStyle: "short"
});
timeStyleFormatter.format(dt); // 5:24 PM

//long
timeStyleFormatter = new Intl.DateTimeFormat("en" , {
  timeStyle: "long"
});
timeStyleFormatter.format(dt); //5:25:20 PM GMT+5:30

dateStyle

let dt = new Date("12-1-2021");

let dateStyleFormatter = new Intl.DateTimeFormat("en" , {
  dateStyle: "long"
});
dateStyleFormatter.format(dt); // "December 1, 2021"

let dateStyleFormatter = new Intl.DateTimeFormat("en" , {
  dateStyle: "medium"
});
dateStyleFormatter.format(dt); // "Dec 1, 2021"

let dateStyleFormatter = new Intl.DateTimeFormat("en" , {
  dateStyle: "short"
});
dateStyleFormatter.format(dt); // "12/1/21"

We can also combine dateStyle and timeStyle as follows:

let styleFormatter = new Intl.DateTimeFormat("en" , {
  dateStyle: "medium",
    timeStyle :"short" 
});
styleFormatter.format(dt); // Dec 1, 2021, 12:00 AM

Thanks 🙏 for Reading 📖