Best 6 ES2020 Features that You Should Check

Each new addition to the ES family has improved the previous versions by incorporating features that help the developers in writing neat, scalable, and maintainable code.

Without further ado, let’s take a look!

1. Private Class Variables

To write a secure, well-thought-of, and well-architectured objected-oriented code, we often need to restrict some code snippets for internal use in class only.

Before ES2020, there was no concept of declaring private class variables, but with the introduction of ES2020, we can seamlessly create private class variables and use them within the class only without worrying about their access from outside the scope of a class.

A tremendous satisfaction for someone who loves the object-oriented programming paradigm, I must say!

We can declare private class variables in ES2020 as follows.

class Account {
  #atmPin = "1234"
}
const savingAccount = new Account()
console.log(savingAccount.#atmPin) // private variable not accessible outside the class scope

In the above code snippet, the hash symbol # is responsible for letting the class know that atmPin is a private variable.

2. Dynamic Import

With the dynamic import feature, we can improve the performance of our application by allowing it to import modules dynamically at runtime.

This saves us from a lot of overhead of module bundlers and allows us to streamline the core logic effectively.

One of the most significant advantages of dynamic importing of modules in ES2020 is that we are not bound to overload application runtime by unnecessarily importing modules even if they are not needed as per the actual program flow.

For instance, if we have a module dependency inside a certain if-block of the code, we can dynamically import the module inside the if-block as per the application needs. Let’s have a look at the example below to understand its significance visually.

if (condition) {
  const mathModule = await import('./math-module.js')
  const numArray = [1, 2, 3, 4, 5]
  mathModule.calculateSum(numArray)
}

In the above code snippet, we are only importing the module math-module if the condition evaluates to true, therefore improving the application’s runtime execution costs.

3. Optional Chaining Operator

The optional chaining operator feature in ES2020 allows us to safely access the properties inside the object even if they are not defined.

By using an optional chaining operator, if the value inside the object is undefined, then it would merely return undefined rather than breaking the code with an error prompt.

Let’s look at a comparison to understand it more.

const car = {
  model: 'xyz',
  color: 'black'
};
console.log(car.model);  // xyz
console.log(car.shape);  // Error: car.shape is undefined

The above code snippet generates an error in the last statement because we are using conventional dot notation to access in nested properties.

Using the optional chaining operator, we can get rid of the error and safely return undefined in case of a property mismatch.

console.log(car?.model);  // xyz
console.log(car?.shape);  // undefined

4. BigInt

BigInt is undoubtedly a significant relief! With the introduction of BigInt data type in ES2020, we can handle and deal with enormously large numbers and perform conventional mathematical operations on them with the same ease.

A number is treated as BigInt by just appending n at the end of the number, as shown below.

const number = 1234567;  // a conventional JavaScript number
const bigNumber = 12345678901234567890n;  // a BigInt

5. Nullish Coalescing Operator

The nullish coalescing operator is one of the most powerful additions in ES2020, I must say.

In case you’re not familiar with the treatment of truthy or falsy values in JavaScript, please note that JavaScript allows the truthy values and blocks the falsy ones.

For instance, in JavaScript, the empty string is technically falsy, but if our application handles some fundamental logic on the empty string, we won’t be able to capture that.

const name = "John";  // truthy
const car = "";   // falsy
console.log(name || "Default");  // John
console.log(car || "Default");  // Default

The || operator works on the truthy/falsy phenomenon.

In contrast, the nullish coalescing operator ?? appears out to be more type strict by when dealing with falsy notations such as an empty string or a number 0.

Hence, if the variables in the code snippet above were displayed using a null coalescing operator ??, the output would be similar to as shown in the following code segment.

console.log(name ?? "Default");  // John
console.log(car ?? "Default");  // ""

6. globalThis

The globalThis feature is a super cool addition to the ES family, especially if we are building cross-platform applications.

The global variable for JavaScript running in browsers is window. This variable differs in the Node.js environment and is denoted by global. Similar is the case with other runtime environments as well.

With the introduction of globalThis, we need not worry about identifying the specific runtime environment and then writing the appropriate call. Instead, globalThis handles all that hustle for us.

Cool enough, no?

Wrapping Up

This was all about the top 6 newly added features in the ECMAScript family version 2020.

These features have indeed contributed a great deal in helping developers to manage and maintain the codebases effectively.

Various runtime and compile-time complexities are efficiently eased down by the introduction of these new features in ES2020.

I hope this article served as a practical guide toward learning the recently released ES2020. I will be soon back with another fun-learning and informative article.

Until then, happy coding with ES2020!

P.S. Check out the JavaScript Generators!