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); |
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(); |
[ '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); |
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); |
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); |
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 |
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))); |
fulfilled 50 rejected undefined
Supported browser:
- Chrome 1
- Edge 12
- Firefox 1
- Safari 1
- Opera 3
