Top ES11 Features | Javascript

11ad1f23a169f3fe0f8737f12d1da5ff 1

In this blog, we will discuss the coolest new ES11 features. I will cover the one that you guys probably should know and things that you should use in your everyday javascript world. Almost all modern browsers support ES11.

ES11 FEATURES

globalThis

this, window, frames, self refer to Global Object. In Web Worker, only “self” will work. In Node JS there is a separate object called “global” so we cannot use a window for Node JS. globalThis will work across all the places irrespective of platform.

es11 features

Promise.allSettled()

This is another function in promises that allows us to find out all the promises that you want to execute is settled. It will return status if all promises are either resolved or rejected. It will wait even if the promise gets rejected.

let p1 = new Promise((resolve,reject)=> setTimeout(()=>resolve(),100))
let p2 = new Promise((resolve,reject)=> setTimeout(()=>reject(),200))
let p3 = new Promise((resolve,reject)=> setTimeout(()=>resolve(),300))
Promise.allSettled([p1,p2,p3]).then(result=>console.log(result))
es11 features

Nullish Coalescing Operator (??)

This Operator(??) is very useful when you want to consider zero or empty strings and ignore undefined or null. In OR(||) it will not consider 0, an empty string, undefined and null.

let website = "";
let age = 0;
console.log(website || "Infohubblog") //Output: Infohubblog
console.log(age || 21) //Output: 21
console.log(website ?? "Infohubblog") //Output: ""
console.log(age ?? 21) //Output: 0
es11 features

Optional Chaining Operator (?.)

If you have two levels of undefined then you will get the error “Cannot read property ‘name’ of undefined”. Example

let profile = {
}
console.log(profile.user.name); // Cannot read property'name' of undefined

In the above code, you will get the error “Cannot Read ‘name’ of undefined” because there is no such property user. So If you try to read the name from the user property then you are basically reading from undefined so you got this error.

Usually, the developer resolve using && Operator.

console.log(profile && profile.user && profile.user.name); //This will resolve error but to do cleaner way use optional chainng operator.
console.log(profile?.user?.name); //This is Cleaner way to solve this problem.

Optional Chaining Operator is a cleaner way to write code compared to && Operator.

BigInt

Javascript have only one type of number i.e. number It has a limit i.e 9007199254740991. The length of this number is 16 so the maximum digit allowed is 16. If you want to use a number that is bigger than this then you can’t use this. It becomes unpredictable since sometimes it gives correct value and sometimes incorrect value.

console.log(Number.MAX_SAFE_INTEGER) //Output: 9007199254740991

If you want to store a number that is bigger than this then you can use BigInt. You need to use “n” notation to denote that number is of BigInt.

let number = 1n;
console.log(number+1n); //Output: 2n

If you want to convert from another data type to a Big Integer then in that case you need to use a constructor.

let number = BigInt('1');
console.log(number) //OUTPUT: 1n

matchAll

matchAll returns an array of all results that is matching a string against a regular expression. It is a new method added to the string prototype.

const regexp = /infohubblog/g; //This Regular Expression check if string contain "infohubblog"
const str1 = 'infohubblog is best blog';

const array = [...str1.matchAll(regexp)][0];
console.log(array)
es11 features

Hope you like our ES11 Features blog. Please subscribe to our Blog for upcoming blogs.

Happy Coding!

Read more: Different types of While For Loop Javascript ES6, Promises in JavaScript | 10 Minute | 2021, Array Destructuring | Spread Operator | Rest Operator | Javascript, ECMAScript

Leave a comment

Your email address will not be published.


*