Es2020/es2021

New ES2020/ES2021 features you may have missed

TC39 — is the organization behind the standardization of the ECMAScript (JavaScript) specification

ES2020

Dynamic Import — There are many cases when a section of your code is dependent on the module which is not loaded initially but needed if a user visits that conditional section- In that case loading the conditional module as default will be not good practice. So, now we have syntax for conditional loading a module or say loading a module dynamically.

if(condition){

import(‘/modules/my-module.js’)  
 .then(module => {  
 module.loadPageInto(main);  
 })

Nullish Coaslescing — Returning the second operand when the first one evaluates to either null or undefined (but no other falsy values)

varibale === null || variable ===undefined  
const var1 = null ?? 'default string';  
//var1 will be- "default string"

Optional Chaining

user && user.profile && user.profile.name

user?profile?.name

Promise.allSettled- Returns a promise that resolves after all of the given promises have either been fulfilled or rejected-
useCase- Use when multiple async tasks are not dependent

**String.matchAll() -  
**The matchAll() method returns an iterator of all results matching a string against a regular expression11

const regexp = /t(e)(st(\\d?))/g;  
const str = 'test3test5';

const array = \[...str.matchAll(regexp)\];  
**array\[0\] ---**  
\["test3", "e", "st1", "3"\]

**array\[1\] ---**  
\["test5", "e", "st2", "5"\]

BigInt- BigInt values can be used for arbitrarily large integers(numbers larger than 2⁵³ -1).

Ex-

const num = BigInt(“0b1111113311111111111111111111111111111111”)

globalThis — The globalThis property provides a standard way of accessing the global ‘this’ value irrespective of the environment the code is being run on.

like on
on browser Global obj is window on webwork Global Obj is selfon nodeJs Global Obj is global

And previously for getting our Global Obj we have put conditions for knowing the env where code is running like

 **if (typeof self !== 'undefined') { return self; }  
 if (typeof window !== 'undefined') { return window; }  
 if (typeof global !== 'undefined') { return global; }**

But with this property it is not required now.  
// browser environment  
console.log(globalThis);    // => Window {...}  
// node.js environment  
console.log(globalThis);    // => Object \[global\] {...}

ES2021

Replace All — Previously there was no replaceAll method in js. we were having only replace method and for achieving replaceAll, we had to use Regular Exp. But now we have the replaceAll method.

str= 'the cat looks like a cat';  
str2= str.replace(/cat/g, 'dog');

Now  
str2= str.replaceAll('cat', 'dog');

promise.any()- As soon as one of the promises in the iterable fulfills, returns that single promise

If promise in the iterable fulfill - Return that promise
If no promises in the iterable fulfill - return promise that is rejected with an AggregateError

AggregateError-
The AggregateError object represents an error when several errors need to be wrapped in a single error.

Number separator- Allows underscores as separators in numeric literals

const num =1000000  
Can also be written as  
const num =10_00_000

Note- this is just cosmetic change, means how we read/look on our codebase. it will not impact calculation part. You can say it provided more readabilityThe logical OR operator.

**Logical OR assignment

**(x ||= y) operator only assigns if x is falsy.  
// returns x when x is truthy  
// returns y when x is not truthy

x ||= y) can be read as below  
x || (x = y);

WeakRef — Obj helps you in holding a weak reference to another object. It prevents that obj from getting garbage-collected.
Note- Not recommended — The problem with it is that you might lose the value of Obj randomly. Not having browser support for (IE/OPERA/OPERA ANDROID). Please avoid using this.

Happy learning…. 👏👏👏