Unlock the Power of Modern JavaScript: 6 Essential Features to Boost Your Skills

BigInt: Unleashing the Power of Large Integers

When working with massive integers in JavaScript, we’ve traditionally relied on third-party libraries due to the limitations of the Number type. However, with the introduction of BigInt, we can now represent integers larger than 2^53 with ease.

const largeInteger = 123456789012345678901n;
console.log(largeInteger); // 123456789012345678901n

Nullish Coalescing Operator: A Game-Changer for Default Values

ES2020 brings us the nullish coalescing operator (??), a short-circuiting operator that checks for null or undefined values. This feature is particularly useful when setting default values for properties or variables.

let foo = null;
let bar = 'default value';

let result = foo?? bar;
console.log(result); // "default value"

Unlike the logical OR operator,?? returns the right operand only if the left operand is null or undefined.

Promise.any(): Asynchronous Operations Just Got Easier

Building upon the success of Promise.all() and Promise.race(), ES2021 introduces Promise.any(). This method returns a promise that fulfills when one of the promises in the iterable fulfills, or rejects if all promises reject.

const promises = [promise1, promise2, promise3];
Promise.any(promises).then((result) => {
  console.log(result); // result of the first fulfilled promise
}).catch((error) => {
  console.error(error); // error if all promises reject
});

With Promise.any(), you can elegantly handle multiple asynchronous operations.

Promise.allSettled(): Unifying Rejected and Fulfilled Promises

Another exciting addition to the promise object is Promise.allSettled(). This method returns the result of all promises, whether rejected or fulfilled.

const promises = [promise1, promise2, promise3];
Promise.allSettled(promises).then((results) => {
  results.forEach((result) => {
    if (result.status === 'fulfilled') {
      console.log(result.value); // fulfilled promise value
    } else {
      console.error(result.reason); // rejected promise reason
    }
  });
});

By using Promise.allSettled(), you can effortlessly handle multiple promises and extract valuable insights from your asynchronous operations.

Optional Chaining Operator: Simplifying Nested Property Access

The optional chaining operator (?.) is a lifesaver when working with nested properties. By allowing you to access properties without validating each step of the chain, you can avoid tedious error handling and write more concise code.

const user = {
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const street = user?.address?.street;
console.log(street); // "123 Main St"

globalThis: A Universal Property for Accessing the Global Object

With the rise of JavaScript in diverse environments, accessing the global object has become increasingly complex. globalThis provides a single, universal property to access the global object, making it easier to write portable JavaScript programs.

console.log(globalThis); // window, global, or self, depending on the environment

By embracing these six features, you’ll be well-equipped to tackle the challenges of modern JavaScript development. Stay ahead of the curve and unlock the full potential of your code!