The Biggest Features in ES2020/ES2021

ES2020/ES2021: Features you might 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 expression.

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 globalAnd 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 is fulfilled - Return that promise
If no promises in the iterable are fulfilled - return a 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 a cosmetic change, which means how we read/look on our codebase. it will not impact the calculation part. You can say it provided more readability 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);

Happy learning…. 👏👏👏👏👏👏