ES2020: Unpacking the Latest Evolution of JavaScript

JavaScript, also known as ECMAScript, has come a long way since its humble beginnings in the mid-'90s.

With the annual release cycle of ECMAScript, we witness a host of exciting features added every year, continually expanding the language's capabilities. ES2020, or ECMAScript 2020, is no exception.

This version introduces a suite of powerful features, taking a significant step towards making JavaScript more robust and developer-friendly.

Introduction to ES2020

ES2020 is the 11th edition of the ECMAScript Language Specification. As always, the goal is to provide an improved basis for robust and reliable JavaScript applications. The proposal process for new features consisted of several stages, from initial drafting to final approval, ensuring that only thoroughly vetted features made their way into the language.

Let's dive into the key features that ES2020 brings to the table.

Key Features of ES2020

1. BigInt

In JavaScript, the Number type can only safely represent numbers up to 2^53 - 1, also known as Number.MAX_SAFE_INTEGER. BigInt is a new primitive that can represent integers of arbitrary length. A BigInt is created by appending n to the end of an integer.

const aBigNumber = 1234567890123456789012345678901234567890n;

2. 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.

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
}

const undefinedValue = response.settings.undefinedValue ?? 'default';
console.log(undefinedValue);  // "default"

const headerText = response.settings.headerText ?? 'Hello, world!';
console.log(headerText);  // "" (an empty string is not null or undefined)

3. Optional Chaining Operator (?.)

The optional chaining operator allows you to read the value of a property located deep within a chain of connected objects without having to expressly validate each reference.

const response = {
  settings: {
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
}

const title = response?.data?.title;  // undefined

4. Promise.allSettled()

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.

const promises = [ fetch('/api-call-1'), fetch('/api-call-2') ];

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

5. Dynamic Import

Dynamic Import introduces a new function-like form of import that unlocks the ability to load modules dynamically at runtime.

let moduleSpecifier = './module.js';
import(moduleSpecifier)
  .then(module => {
    // Use module for module.exports
  })
  .catch(err => {
    // Handle failure
  });

The Impact of ES2020 on Modern JavaScript

ES2020 continues to build on JavaScript's strengths, enhancing its capacity to build robust, complex web applications.

Features like BigInt allow developers to safely use very large integers, while nullish coalescing and optional chaining simplify the handling of values that might be null or undefined.

With the addition of dynamic imports, JavaScript can now more effectively handle module loading based on conditions.

Conclusion

JavaScript's journey from a simple scripting language to a powerhouse of web development is truly remarkable, and ES2020 is yet another testament to this evolution.

The features introduced in ES2020 empower developers to write more efficient, clean, and powerful JavaScript code. Whether you are a seasoned developer or just getting started, understanding the newest features of JavaScript is crucial for writing modern, efficient web applications.