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 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
let bigNum = BigInt(
"123422222222222222222222222222222222222" );
console.log(bigNum);
let bigHex = BigInt( "0x1ffffffeeeeeeeeef" );
console.log(bigHex);
let bigBin = BigInt(
"0b1010101001010101001111111111111111" );
console.log(bigBin);
|
Output
123422222222222222222222222222222222222n
36893488074118328047n
11430854655n
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() {
const regex = /e(xam)(ple(\d?))/g;
const str = 'example1example2example3' ;
const array = [...str.matchAll(regex)];
console.log(array[0]);
}
myFunction();
|
Output
[
'example1',
'xam',
'ple1',
'1',
index: 0,
input: 'example1example2example3',
groups: undefined
]
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);
|
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')
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;
x &&= y;
console.log(x);
let name = {
firstName: "Ram" ,
};
console.log(name.firstName);
name.firstName &&= "Shyam" ;
console.log(name.firstName);
|
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: "" ,
};
console.log(name.firstName);
name.firstName ||= "Shyam" ;
console.log(name.firstName);
console.log(name.lastName);
name.lastName ||= "Kohli" ;
console.log(name.lastName);
|
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;
x ??= z;
y ??= z;
console.log(x)
console.log(y)
|
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
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
Share your thoughts in the comments
Please Login to comment...