ECMAScript 2020 Spotlight: Unpacking the 5 Features You Can't Ignore

Welcome to a whirlwind tour of JavaScript's evolution! In this blog post, we'll be focusing on five standout features introduced in ECMAScript 2020 (ES11). While there's a whole host of exciting additions, we'll zoom in on these five, exploring how they can supercharge your JavaScript projects. Let's dive right in!

1. Nullish Coalescing Operator (??):

The Nullish Coalescing Operator (??) is like the 'or' operator (||) but with a specialized focus. While the 'or' operator can be a catch-all for falsy values like 0, an empty string (''), or false, the Nullish Coalescing Operator is more discerning. It specifically targets nulland undefinedvalues, providing a robust solution for handling them.
Why do we need this distinction? There are situations where the 'or' operator might not provide the desired outcome. Let's illustrate this with a simple example:
Consider a scenario where you want to set a default value for a variable if it's currently nullor undefined. Here's where the 'or' operator falls short. Take a look at this code:

let regularPrice = 150;
let defaultDiscount = 0;

// Using the 'or' operator
let finalDiscountOr = defaultDiscount || 25;
let finalPriceOr = regularPrice - finalDiscountOr;

console.log(`Using 'or' operator: Final Discount: ${finalDiscountOr}, Final Price: ${finalPriceOr}`);

// Using the Nullish Coalescing Operator
let finalDiscountNullish = defaultDiscount ?? 25;
let finalPriceNullish = regularPrice - finalDiscountNullish;

console.log(`Using Nullish Coalescing Operator: Final Discount: ${finalDiscountNullish}, Final Price: ${finalPriceNullish}`);

In this scenario, we have the default discount equal to 0, and we want to apply a discount of 25if there was not a default value (0 IS a value). With the 'or' operator, the final discount would incorrectly be 25, even though we set the default to 0. However, when using the Nullish Coalescing Operator, the final discount remains 0, as expected, making it a better choice for handling these situations.
In conclusion, the Nullish Coalescing Operator (??) is a valuable addition to JavaScript, offering a focused solution for dealing with null and undefined values. It ensures that you get the behavior you expect when setting default values, making your code more robust and predictable.

2. Optional Chaining Operator (?.):

Modern JavaScript brings us powerful tools to write cleaner and more concise code. One such tool is the Optional Chaining Operator (?.), which addresses a common challenge in JavaScript development—dealing with potentially undefinedor nullvalues when working with nested objects and properties.
This operator is a game-changer when it comes to simplifying your code, and it's available in recent versions of JavaScript. Let's see how the Optional Chaining Operator can make your code more robust and elegant.

// Suppose you have an object representing a user profile with optional data
const userProfile = {
  username: 'js_dev',
  bio: 'JavaScript enthusiast',
  social: {
    twitter: '@js_dev_twitter',
    github: 'js-dev-github',
  },
};

// Accessing properties without optional chaining
const twitterHandle = userProfile.social.twitter; // Fine when all properties exist
const instagramHandle = userProfile.social.instagram; // Error if property doesn't exist

// Accessing properties with optional chaining
const twitterHandleSafe = userProfile.social?.twitter; // Safely handles potential undefined
const instagramHandleSafe = userProfile.social?.instagram; // Returns undefined without errors

console.log('Twitter Handle (No Chaining):', twitterHandle); // Works
console.log('Instagram Handle (No Chaining):', instagramHandle); // Throws error

console.log('Twitter Handle (With Chaining):', twitterHandleSafe); // Works
console.log('Instagram Handle (With Chaining):', instagramHandleSafe); // Works and returns undefined

When accessing nested properties like userProfile.social.twitter, using the Optional Chaining Operator (?.) ensures that we won't encounter errors if any of the properties in the chain are undefinedor null.
Up until now, you might be familiar with using the Optional Chaining Operator (?.) to safely access nested properties. But did you know there's another powerful aspect of this operator that many developers might not be fully aware of? Let's explore this hidden gem in another example:

// A function that takes an optional callback
function processRequest(data, callback) {
  console.log('Processing request with data:', data);
  callback?.();
  // other stuff…
}

// Using the processRequest function with and without a callback
processRequest({ id: 1 }); // No callback provided, no errors
processRequest({ id: 2 }, () => {
  console.log('Callback executed');
}); // Callback provided and executed

As you can see, the Optional Chaining Operator (?.) simplifies working with optional callback functions and accessing nested properties in JavaScript. It streamlines your code, making it more elegant and error-resistant, especially in scenarios where callbacks may or may not be provided or when dealing with potentially undefinedor nullvalues. Embrace this feature to enhance the robustness of your JavaScript applications.

3. String.prototype.matchAll():

JavaScript provides various methods for working with strings and patterns. One such method introduced in ECMAScript 2020 (ES11) is String.prototype.matchAll. This method takes regular expressions to a new level by returning an iterator that yields all matches in the text. It's a powerful tool for efficiently extracting multiple pieces of information from a string.
As a practical example, let's see how we could extract URLs or links from a block of text using String.prototype.matchAll:

const text = `
  Check out my website at https://www.example.com.
  Here's a link to my GitHub profile: https://github.com/yourusername.
  And don't forget to follow me on Twitter: https://twitter.com/yourhandle.
`;
const regex = /https?:\/\/\S+?(?=\s|\n|$)/g;
const matchIterator = text.matchAll(regex);
const links = Array.from(matchIterator, match => match[0].replace(/\.$/, ''));
console.log(links);

The log after running this code is

[ 'https://www.example.com', 'https://github.com/yourusername', 'https://twitter.com/yourhandle' ]

We've witnessed how String.prototype.matchAll can simplify complex tasks by efficiently extracting multiple occurrences of patterns in text. Now that we've explored its capabilities, let's move on to another impactful addition to ECMAScript 2020.

4. Promise.allSettled():

In ECMAScript 2020, a powerful addition to the Promise API emerged: Promise.allSettled. This method provides a robust way to work with promises, allowing you to handle multiple asynchronous operations and gather their results, even when some promises fail.
Let's explore how Promise.allSettled can simplify asynchronous workflows and provide detailed insights into the status of each promise.

const promises = [
  new Promise((resolve) => setTimeout(() => resolve('Promise 1 resolved'), 1000)),
  new Promise((resolve) => setTimeout(() => resolve('Promise 2 resolved'), 500)),
  new Promise((reject) => setTimeout(() => reject('Promise 3 rejected'), 800)),
];

Promise.allSettled(promises)
  .then((results) => {
    results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
        console.log(`Promise ${index + 1} succeeded with value:`, result.value);
    } else {
        console.error(`Promise ${index + 1} failed with reason:`, result.reason);
    }
    });
  })
  .catch((error) => {
    console.error('An error occurred:', error);
  });

and the log is

'Promise 1 succeeded with value:' 'Promise 1 resolved'
'Promise 2 succeeded with value:' 'Promise 2 resolved'
'Promise 3 succeeded with value:' 'Promise 3 rejected'

In summary, Promise.allSettled is a valuable addition to JavaScript, allowing you to work with a collection of promises and handle each promise's result, whether it resolves or rejects. This feature provides greater flexibility in managing asynchronous operations and helps prevent unhandled promise rejections. With Promise.allSettled, you can build robust applications that gracefully handle various scenarios and errors when dealing with multiple promises.

5. GlobalThis: A Modern Way to Access Global Objects in any Environment

In the ever-evolving world of JavaScript, staying up-to-date with the latest language features is crucial. One such feature, globalThis, offers a modern and consistent way to access global objects in JavaScript environments (browser, Node.js, etc). Gone are the days of juggling between window, self, or this, depending on where your code runs. With globalThis, you now have a single, unified interface to access global objects, making your code cleaner and more portable. Let's explore the power of globalThisand how it simplifies global object access in modern JavaScript.
Before the introduction of globalThis, developers often had to rely on environment-specific global variables to access the global object in JavaScript. For instance, when targeting web browsers, you'd typically use window, and in Node.js, you'd use global. This necessitated conditional checks to determine the correct global variable for a given environment. Here's an example:

let globalObject;

// Check for a web browser environment
if (typeof window !== 'undefined') {
  globalObject = window;
}
// Check for a Node.js environment
else if (typeof global !== 'undefined') {
  globalObject = global;
}

// Use globalObject for cross-environment compatibility
console.log(globalObject.location.href);

This code works, but it involves extra logic to handle different environments. The introduction of globalThissimplifies this process.
With globalThis, you can access the global object consistently across various JavaScript environments, eliminating the need for environment-specific checks. Here's how you can achieve the same result using globalThis:

// Access the global object consistently using globalThis
const globalObject = globalThis;

// Now, globalObject represents 'window' in a web browser or 'global' in Node.js
console.log(globalObject.location.href);

Using globalThis, you obtain a reference to the global object, whether it's windowin a web browser or globalin Node.js, in a straightforward and unified manner. This approach not only simplifies your code but also ensures cross-environment compatibility without conditional logic.
By leveraging globalThis, you can write cleaner, more concise code that works seamlessly across different environments, improving code maintainability and cross-environment compatibility. Whether you're building libraries, frameworks, or applications, globalThissimplifies global object access, making your JavaScript code more robust and portable.

Conclusion:

In this exploration of ECMAScript 2020, we've uncovered five powerful features that bring modernity and efficiency to JavaScript development. Let's recap our journey:

• Optional Chaining Operator (?.): This operator simplifies working with nested objects and properties by gracefully handling potentially undefined or null values.
• Nullish Coalescing Operator (??): It provides a concise way to handle default values for null or undefined variables without unintentionally falsy values.
• String.prototype.matchAll(): This method empowers developers to efficiently extract information from structured data, such as JSON-like structures or text patterns, with ease.
• Promise.allSettled(): It offers precise control over Promise resolution, allowing you to handle multiple asynchronous operations, even when some fail, without halting the entire process.
• globalThis: The introduction of globalThis provides a standardized way to access the global object, making it easier to write cross-environment code.

All these features will collectively enhance your JavaScript toolkit. They allow you to write cleaner, more expressive code and address common challenges in a straightforward manner. As you embark on your JavaScript projects, keep them close at hand.
JavaScript is continually evolving, and staying up-to-date with its latest features will empower you to build cutting-edge applications and websites.

Happy coding!