JS 2020 - ECMAScript 2020

Last Updated : 24 Aug, 2023

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

ECMAScript 2021 (JS 2021/2022)

vishalkumar2204

Improve

Article Tags :

JS 2020 - ECMAScript 2020

Method 1: BigInt

Method 2: String matchAll() Method

Method 3: The Nullish Coalescing Operator (??)

Method 4: The Optional Chaining Operator (?.)

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

Method 6: Logical OR Assignment (||=)

Method 7: Nullish Coalescing Assignment (??=)

Method 8: Promise allSettled()

Similar Reads