My Top 5 Favorite Things from JavaScript ES2020

Being a JavaScript developer, knowing the ECMAScript standards is the essential one.

So, I would like to share my top 5 favorite things from JavaScript ES2020 which are all finalized proposals (stage 4).

Top 5 Favorite Things From JavaScript ES2020

1. Nullish Operator (??)

Before this introduced, we have been using || OR operator. But ?? and || basically serves a different purpose.

|| is to check falsy values whereas ?? operator is to check both NULL or Undefined.

const user = { name: 'John' };
console.log(user.name ?? 'Not Exists.');

2. Optional Chaining (?.)

Before this, we have been using && AND operator to check whether left-hand side expression returns true, then the right-hand side expression would be evaluated.

const user = { name: 'John' };
console.log(user?.name);

3. Dynamically Importing JS Module

We could lazy load the JS module at runtime by using this option,
import(<module_file_name>)

async loadUser() {
  const user = await import(`./user.js`);
  console.log(user.getName());
}

4. Accessing Global Context

We use a certain keyword to access the global context but it differs for each environment. For instance,

• window is the keyword for browser environment,
• global is the keyword for Node.js environment,
• self is the keyword for Web/service workers

globalThis is the new keyword that solves the above environment context issue.

As a web developer, We often stick to write once run it anywhere principle. In this fashion, this new addition would help us a lot.

5. Promise.allSettled (Promise.allSettled([inputs]))

As a web developer, invoking multiple HTTP requests simultaneously is the usual thing.
Promise.allSettled([]), this one will be settled down when all the inputs are either resolved/rejected.

const getUser = () => Promise.resolve({ name: 'John' });
const getUserRights = () => Promise.reject(new Error(`Unauthorized Access...`));
const getUsersCount = () => Promise.resolve({ total: 5000 });

Let's say we have 3 promise calls which we are going to invoke parallelly.

Promise.allSettled([getUser(), getUserRights(), getUsersCount()])
       .then(([user, rights, count]) => {
           if(user.status === 'resolved') { console.log(user.value); }
        })
       .catch(console.error);

We have different options available to invoke multiple Promise calls at a time, Promise.all([]) and Promise.race([]). But those two Promise objects differ based on the use case.

Promise.all([x, y, z]) will invoke all the given Promises parallelly but if anyone is failed then this operation would end up in catch block of Promise.all([]). But the resolved input promise would be ignored.

Promise.race([x, y, z]), this output will be resolved as soon as one of the input promise is resolved.

NOTE: If you're coming from C# background you have already familiar with ?? and ?. operators.