# Es2020/es2021

New ES2020/ES2021 features you may have missed

[TC39](https://tc39.es/) — 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 **self**on 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…. 👏👏👏