JS ES2021 novelty

Except for the COVID, 2020 brought JS features to the Google Chrome V8 engine. Top 6 features will be mentioned in this article.

— — — — — — — — — — — — — — — — — — — — — — — — — —

• String.prototype.replaceAll
• Promise.any
• Logical Operators and Assignment Expressions
• Numeric Separators
• Intl.ListFormat
• dateStyle and timeStyle options for Intl.DateTimeFormat

— — — — — — — — — — — — — — — — — — — — — — — — — —

String.prototype.replaceAll

If replace() method only replaces the first instance of a pattern in a string, replaceAll() returns a new string with all matches of a pattern replaced by a replacement.

let string = 'I use MacOS, I love MacOS'
string = str.replaceAll('MacOS', 'windows');

console.log(str)

/**** Output ****/
// I use windows, I love windows

Promise.any

If Promise.any() method short-circuits and returns a value, as soon as it hits the first resolved promise from the list/array of promises, Promise.race() method short-circuits once one of the given promises either resolves or rejects.

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
  new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))

/****  Output  ****/
// Result: Second

When all of the promises are rejected, AggregateError is thrown.

Promise.any([
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))

/****  Output  ****/
// AggregateError: All promises were rejected

Logical Assignment Operator with && operator

A new feature lets combine logical operators and assignment operators.

let num1 = 5
let num2 = 10

num1 &&= num2

console.log(num1) // 10

Logical Assignment Operator with || operator

let num1
let num2 = 10

num1 ||= num2

console.log(num1) // 10

Logical Assignment Operator with ?? operator

let num1
let num2 = 10

num1 ??= num2
console.log(num1) // 10

num1 = false
num1 ??= num2
console.log(num1) // false

Numeric Separators

My favorite feature as it makes to read numeric values easier (using the _ (underscore) character to provide a separation between groups of digits). Take a look :

let number = 200_000 

console.log(number)

/****  Output  ****/
// 200000

Intl.ListFormat

The ListFormat Object takes two parameters, both of them are optional. The first parameter is language (locale) and the second parameter is an options object that has two properties — style and type.

Method format() receives an array as an argument and format it in different ways that are language dependent.

const arr = ['Pen', 'Pencil', 'Paper']

let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  Output  ****/
// Pen, Pencil, & Paper


obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  Output  ****/
// Pen, Pencil, and Paper


obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  Output  ****/
// Pen, Pencil, Paper


// Italian
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  Output  ****/
// Pen, Pencil e Paper


// German
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 

/****  Output  ****/
// Pen, Pencil und Paper

dateStyle and timeStyle options for Intl.DateTimeFormat

Intl.DateTimeFormat is a constructor to enable language-sensitive date and time formatting. dateStyle and timeStyle options are used to request a locale-specific date and time of a given length.

// Time only with short format
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM


// Time only with medium format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM


// Time only with long format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11


// Date only with short format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20


// Date only with medium format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020


// Date only with long format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020

Conclusion

If you wanna stay up to date with new features and other interesting coding info, follow me :)