JS 2020 – ECMAScript 2020

JavaScript ECMAScript 2020 (ES11) introduced new features like optional chaining, nullish coalescing, dynamic import(), BigInt, and Promise.allSettled(), etc. enhancing language capabilities for modern web development needs.

JavaScript 2020 (ES11) or ECMAScript 2020 new features are:

BigInt	type for arbitrary precision integers beyond the Number’s limit.
String matchAll()	returns an iterator for all regex matches in the string.
The Nullish Coalescing Operator (??)	returning right operand if the left is nullish, else left.
The Optional Chaining Operator (?.)	accessing nested properties if they exist, otherwise returns undefined.
Logical AND Assignment Operator (&&=)	assigns the right operand to the left if the left is truthy.
Logical OR Assignment (||=)	assigns the right operand if the left is falsy, else left.
Nullish Coalescing Assignment (??=)	the operator assigns the right operand if the left is nullish, else left.
Promise allSettled()	returning an array of promise results with status and value.
Dynamic Import	enables asynchronous import of modules at runtime.

Method 1: BigInt

BigInt is a built-in object in JavaScript that provides a way to represent whole numbers larger than 253-1.

Syntax:

BigInt( number ) 
or
Appending n to end of an integer literal

Example: Here is the basic example of above-method.

Javascript

// Parameter in decimal format
let bigNum = BigInt(
    "123422222222222222222222222222222222222");
console.log(bigNum);

// Parameter in hexadecimal format
let bigHex = BigInt("0x1ffffffeeeeeeeeef");
console.log(bigHex);

// Parameter in binary format
let bigBin = BigInt(
    "0b1010101001010101001111111111111111");
console.log(bigBin);

Output

123422222222222222222222222222222222222n
36893488074118328047n
11430854655n

Method 2: String matchAll() Method

This method returns an iterator of all matches in a string based on a regular expression, facilitating comprehensive pattern matching and data extraction in JavaScript.

Syntax:

str.matchAll(Regexp)

Example: Here the basic example of above-mentioned method.

Javascript

function myFunction() {

    //Regular expression with the /g flag
    const regex = /e(xam)(ple(\d?))/g;
    //Reference string
    const str = 'example1example2example3';

    //Using matchAll() method
    const array = [...str.matchAll(regex)];

    console.log(array[0]);
}
myFunction();

Output

[
  'example1',
  'xam',
  'ple1',
  '1',
  index: 0,
  input: 'example1example2example3',
  groups: undefined
]

Method 3: The Nullish Coalescing Operator (??)

The nullish coalescing operator (??) returns the right operand if the left operand is null or undefined, otherwise, it returns the left operand, enhancing conditional value assignment in JavaScript.

Syntax:

variable ?? default_value

Example: In this example, we will see a basic function using the nullish coalescing operator.

Javascript

function myFunction(bar) {
    bar = bar ?? 55;
    console.log(bar);
}
myFunction();
myFunction(22);

Output

55
22

Method 4: The Optional Chaining Operator (?.)

The optional chaining operator (?.) allows safe accessing of nested properties and methods in JavaScript objects, preventing errors when properties are undefined or null.

Syntax:

let Value = user.dog && user.dog.name;

Example: In this example we are using the above-explained method.

Javascript

const user = {
    id: {
        name: "Rohit"
    }
};

console.log(user.cat?.name);
console.log(user.id?.name);
console.log(user.cat.name);

Output:

"Rohit"
"error"
"TypeError: Cannot read properties of undefined (reading 'name')

Method 5: Logical AND Assignment Operator (&&=)

The logical AND assignment operator (&&=) assigns the right operand to the left operand if the left operand is truthy; otherwise, it retains the left operand value in JavaScript.

Syntax:

x &&= y

is equivalent to

x && (x = y)

Example: This example shows the basic use of the Javascript Logical AND assignment(&&=) operator.

Javascript

let x = 5;
let y = 10;

// Changing the value using logical
// AND assignment operator
x &&= y;
console.log(x);

let name = {
    firstName: "Ram",
};

console.log(name.firstName);

// Changing the value using logical
// AND assignment operator
name.firstName &&= "Shyam";

// Here the value changed because
// name.firstName is truthy
console.log(name.firstName);

Output

10
Ram
Shyam

Method 6: Logical OR Assignment (||=)

The logical OR assignment operator (||=) assigns the right operand to the left operand if the left operand is falsy; otherwise, it retains the left operand value in JavaScript.

Syntax:

x ||= y

is equivalent to

x || (x = y)

Example: Here is the example above-mentioned method.

Javascript

let name = {
    firstName: "Virat",
    lastName: "",
};
// Output: Virat
console.log(name.firstName);

name.firstName ||= "Shyam";
// Output: Virat (unchanged, because it's truthy)
console.log(name.firstName);
// Output: (empty string)
console.log(name.lastName);

name.lastName ||= "Kohli";
// Output: Kohli (changed, because it's falsy)
console.log(name.lastName);

Output

Virat
Virat

Kohli

Method 7: Nullish Coalescing Assignment (??=)

The nullish coalescing assignment operator (??=) assigns the right operand to the left operand if the left operand is nullish (null or undefined); otherwise, it retains the left operand value.

Syntax:

x ??= y  // Means : x ?? (x = y)

Example: Here is the basic example of above-mentioned methods

Javascript

let x = 12;
let y = null;

let z = 13;

// The value of x will become
// unchanged because x is not nullish.
x ??= z;

// The value of y will be
// changed because y is nullish.
y ??= z;


console.log(x) // 12
console.log(y) // 13

Output

12
13

Method 8: Promise allSettled()

Promise.allSettled() returns an array of promise results, each containing a status (fulfilled or rejected) and the resolved value or rejection reason, facilitating comprehensive promise handling.

Syntax:

Promise.allSettled(iterable);

Example: In this example, we will use Promise allSettled() Method.

Javascript

// Illustration of Promise.allSettled()
// Method in Javascript with Example

const p1 = Promise.resolve(50);
const p2 = new Promise((resolve, reject) =>
    setTimeout(reject, 100, 'geek'));
const prm = [p1, p2];

Promise.allSettled(prm).
    then((results) => results.forEach((result) =>
        console.log(result.status, result.value)));

Output

fulfilled 50
rejected undefined

Supported browser:

• Chrome 1
• Edge 12
• Firefox 1
• Safari 1
• Opera 3