Modern Javascript - II

Modern Javascript - II

Written by Piyush Sinha on Mar 13th, 2021 ・ Views ・ Report Post

Piyush Sinha Visit User Profile

JavaScript has been evolving very rapidly in recent years. Especially after the release of ES6 in 2015, things have been great. In this article, we'll discuss the features introduced in the ES2020 version.

Optional Chaining

The optional chaining operator (?.) provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null.

For example, consider an object blog which has a nested structure. Without optional chaining, looking up a nested sub-property requires validating the references in between, such as:

const blog = {
  title: "My Blog",
  author: {
    name: "John Doe",
    links: {
      website: "https://john.tech/",
    },
  },
};

const linkToWebsite =
  blog &&
  blog.author &&
  blog.author.links &&
  blog.author.links.website;

By using the ?. operator, JavaScript knows to implicitly check to be sure references in between is not null or undefined before attempting to access further. If the reference is null or undefined, the expression automatically short-circuits, returning undefined. Below is the same example using optional chaining:

//ES2020
const linkToWebsite = blog?.author?.links?.website;

Nullish Coalescing Operator

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

The result of a ?? b is:

  • if a is defined, then a,
  • if a isn’t defined, then b.
const res = (a !== null && a !== undefined) ? a : b;

//ES2020
const res = a??b;

Dynamic Imports

The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on-demand, you can use a dynamic import instead.

  • To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.
//ES2020
import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });
  • This form also supports the await keyword.
//ES2020
let module = await import('/modules/my-module.js');

BigInt

It is a special numeric type that provides support for integers larger than 2^53- 1, which is the largest number Javascript can reliably represent with the Number primitive and represented by the Number.MAX_SAFE_INTEGER constant.

let previousMaxSafe = Number.MAX_SAFE_INTEGER;
// 9007199254740991
previousMaxSafe = previousMaxSafe + 1;
// 9007199254740992
previousMaxSafe = previousMaxSafe + 1;
// 9007199254740992, value stays the same

A BigInt is created by appending n to the end of an integer literal or by calling the function BigInt().

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
//ES2020
let previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// 9007199254740991n
previousMaxSafe = previousMaxSafe + 1n;
// 9007199254740992n
previousMaxSafe = previousMaxSafe + 1n;
// 9007199254740993n, this works now!

Promise.allSettled()

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise. It is typically used when you have multiple asynchronous tasks that are not dependent on one another to complete successfully, or you'd always like to know the result of each promise.

//ES2020
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'Something went wrong'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

Conclusion

ES2020’s new features add even more flexibility and power to the constantly evolving Modern JavaScript. I hope I was able to introduce you to some of the features.

Comments (0)