Top 5 New Things from JavaScript ES2020

Last updated on April 11, 2020

There are multiple new things are introduced to JavaScript in recent version release ES2020. In this blog post, we will be covering Top 5 New Things from JavaScript ES2020.

Introduction

I particularly picked 5 items from the list of features that would be more beneficial for us in building projects with JavaScript.

Top 5 New Features of JavaScript ES2020

We will check the new additions to JavaScript ES2020.

1. Null Coalescing

Earlier, we achieved this by doing like,

if(user !== null && user !== undefined) { 
  // statements
}

But now this could be achieved with adding one new ??symbol.

const user = { name : "Srinivasan K K" };

console.log(user ?? 'Invalid data');

2. Optional Chaining

Before chaining feature, we were doing like,

console.log(user && user.name);

The above code will print the user name when user object is checked with Truthy.

Now, to easily chaining the properties with JavaScript objects, We got introduced with ?.

console.log(user?.name);

3. Dynamic Importing JS Module

Importing JavaScript module is now possible with dynamic but native support. Earlier this could be achieved with the help of 3rd party transpilers such as Babel and Traceur.

const user = await import ('./User.js');

// user will hold the entire module info.

4. Promise.allSettled

Before we get this feature, we had only Promise.all([]) and Promise.race([]) to deal with multiple Promise Objects. There is a significant difference here is that if at least one promise object got rejected then the entire Promise chain would break.

But with the new addition, we could trigger multiple Promise objects at a time then we can expect all the promise would be settled at once.

const resolvePromise = Promise.resolve(['data']);
const rejectPromise = Promise.reject(new Error('Something happened'));

Promise.allSettled([resolvePromise, rejectPromise]);

5. globalThis

To access global Object we had different things for each environment like Window for browser, global for Node.js and self for web/service workers.

But now, with single keyword globalThis. Using the new keyword you could easily identify the variable or function from the global context irrespective of an environment you’re working on.

Conclusion

The above said new additions are my favorite from JavaScript. Just by simply reading will not be worth it until we put it into action.