ES11 / ECMAScript2020

6. A Deep Dive into the Latest JavaScript Features — ES11

The JavaScript has been evolved a lot and one of the widely used language in the world. We are discussing about some core feature of ES11 / ECMAScript 2020 / ECMA2020, the iteration of the ECMAScript standard. Let’s talk about exciting features that can streamline your workflow and enhance your code.

In this article, we’ll delve into some of the key features introduced in ES11:

1. Private Class Variables

We can use private variables inside class using #

class Person {
    #name = 'JS';
    getName() {
        return this.#name;
    }
}

const person = new Person();

console.log(person.getName()); // JS
console.log(person.#name);     // throws error

2. Static Fields

class Person {
    static name = 'JS';
    getName() {
        return Person.name;
    }
}

const person = new Person();

console.log(person.getName()); // JS
console.log(Person.name);      // JS

3. Promise.allSettled

It is used to handle multiple promises concurrently.

Unlike Promise.all, which rejects immediately if any promise in the array rejects.

Promise.allSettled waits for all promises to either fulfils or reject before resolving. This makes it useful when you want to know the result of all promises, regardless of whether they fulfilled or rejected.

Returns an array of result for each rejected and resolved promise.

const promises = [
  Promise.resolve('Resolved Promise 1'),
  Promise.reject('Rejected Promise 2'),
  Promise.resolve('Resolved Promise 3'),
];

Promise.allSettled(promises)
  .then((results) => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log('Fulfilled:', result.value);
      } else if (result.status === 'rejected') {
        console.log('Rejected:', result.reason);
      }
    });
  })
  .catch((error) => {
    console.error('Error in Promise.allSettled:', error);
  });

4. Optional Chaining Operator

It is a wonderful feature introduced in Javascript.

Do you want to access properties or call methods on nested objects, but you’re not sure if the intermediate properties or objects exist.

It helps to avoid TypeError errors that might occur when trying to access properties or methods on null or undefined.

Syntax

object?.property
object?.method()
object?.[expression]

const emp = {
  id: 1,
  name: 'Avyukt',
};

console.log(emp.address)        // undefined
console.log(emp.address.city)   // throw TypeError
console.log(emp.address?.city)  // undefined (with optional chaining)

5. Nullish Coalescing

Handle default values in situations where null or undefined are considered false values.

const value = apiValue ?? defaultValue;

The ?? operator returns the right-hand operand (defaultValue) when the left-hand operand (apiValue) is null or undefined. Otherwise, it returns the left-hand operand.

Example:

Consider a scenario where you want to assign a default value to a variable only if the current value is null or undefined

// Without Nullish Coalescing
let name = null;
let username = name !== null && name !== undefined ? name : 'Guest';
console.log(username); // 'Guest'

// With Nullish Coalescing
let name = null;
let username = name ?? 'Guest';
console.log(username); // 'Guest' when name is null or undefined

6. Dynamic Import

As name suggest, Dynamically/Conditionally import a modules on-demand during runtime.

It is implemented using the import() function, which returns a Promise that resolves to the module namespace object.

Here’s an example of dynamic import:

const searchPromise = import('./search');

searchPromise
  .then((mathModule) => {
    // Do your task like show search modal
  })
  .catch((error) => {
    console.error('Error during dynamic import:', error);
  });

7. BigInt

BigInt is a new data type that allows you to work with very large integers, beyond the limits of the standard Number type.

It is useful when you need to represent and perform operations on integers that are larger than what can be accurately represented with regular JavaScript numbers.

const aNumber = 9007199254740991;

console.log(aNumber + 1); // Outputs: 9007199254740992 (expected)
console.log(aNumber + 2); // Outputs: 9007199254740992 (unexpected and expected was 9007199254740993)

const abigIntNumber = BigInt(9007199254740991);
console.log(abigIntNumber + BigInt(1)); // Outputs: 9007199254740992n (notice the 'n' indicating BigInt)
console.log(abigIntNumber + BigInt(2)); // Outputs: 9007199254740993n

8. globalThis

• In a browser environment, the globalThis is window.
• In a Node.js environment, the globalThis is global.

Here’s an example to illustrate its usage:

// In a browser environment
console.log(globalThis === window); // Outputs: true

// In a Node.js environment
console.log(globalThis === global); // Outputs: true

By using globalThis, Same code can be used in both browser and server-side environments(nodeJs).

// Example of using globalThis for a timeout
globalThis.setTimeout(() => {
  console.log('Timeout completed!');
}, 1000);

Thank you for reading until the end. Before you go, Please consider clapping and following.

Javascript is weird, I like the weird things. Keep Smiling.

UseFul Links:

**Read ES6 — Read ES7 — Read ES8 — Read ES9 — Read ES10 — Read ES11**

**Read ES12 — Read ES13 — Read ES14 — Read ES15**