JS 2020

JavaScript Version Naming and Features

JavaScript's ECMAScript versions were traditionally named using numbers: ES5, ES6. However, starting from 2016, the naming convention shifted to include the year, such as ES2016, ES2018, ES2020, and so forth.

New Features in ES2020

• BigInt: Allows for handling large integers that surpass the limitations of the standard Number type.
• String matchAll(): Provides a method to search for all occurrences of a string or pattern within another string.
• Nullish Coalescing Operator (??): Returns the right-hand operand when the left-hand is null or undefined.
• Optional Chaining Operator (?.): Enables reading the value of a property located deep within a chain of connected objects without having to check if each reference in the chain is null or undefined.
• Logical Assignment Operators: Include AND (&&=), OR (||=), and Nullish (??=) assignment operators.
• Promise.allSettled(): Returns a promise that resolves after all of the given promises have either resolved or rejected.
• Dynamic Import: Supports loading modules dynamically.

Examples and Browser Support

BigInt

To handle integers larger than the Number type can accommodate:

let x = 999999999999999n; // Using 'n' to denote a BigInt

let y = BigInt("1234567890123456789012345"); // Using BigInt function

‍

Type of a BigInt:

let type = typeof BigInt("999999999999999"); // Returns "bigint"

‍

Supported in major browsers like Chrome 67, Edge 79, and others since 2018.

String matchAll()

To find all matches of a string or regex pattern:

const text = "Cats are great because Cats are friendly.";const iterator = text.matchAll(/Cats/g);

‍

matchAll() throws a TypeError if the regex does not have the global (g) flag.

Nullish Coalescing Operator (??)

Used to provide a default value for potentially null or undefined variables:

let name = null;let result = name ?? "default name"; // "default name"

‍

Supported in browsers such as Chrome 80 and Firefox 72 from early 2020.

Optional Chaining Operator (?.)

Avoids errors when attempting to access properties of null or undefined objects:

const car = {type: "Fiat", model: "500"};let color = car?.color; // undefined, no error thrown‍

Introduced in browsers like Chrome 80 and Safari 13.1 in early 2020.

Logical AND Assignment (&&=)

Assigns the right-hand value if the left-hand value is truthy:

‍

let x = 10;x &&= 5; // x is now 5

‍

Supported across modern browsers since mid-2020.

Logical OR Assignment (||=)

Assigns the right-hand value if the left-hand value is falsy:

let x = 0;
x ||= 5; // x is now 5

‍

Browser support since mid-2020 for this operator is similar to that for the &&= operator.

Promise.allSettled()

Handles multiple promises by returning a single Promise that resolves when all of the input promises have settled:

const promises = [  Promise.resolve('success'),  Promise.reject('error')];
Promise.allSettled(promises).
then(results => results.forEach(result => console.
log(result.status)));‍

This method has been supported since late 2019 by browsers like Chrome 76 and Firefox 71.

These features enhance JavaScript's robustness and flexibility in handling various common coding scenarios, especially in modern web development.

‍