New Features in ECMAScript 2020 or ES11
In this article, we are going to cover new features added to ECMAScript 2020.
ECMAScript is generally used for client-side scripting on the World Wide Web (WWW) and is also used for writing server applications and services using Node.js.
ECMAScript evolves and releases its updates every year adding new features in the new releases. Also, the popular browsers add support for new features quickly, with a short time between releases.
The ECMAScript 2020 is the 11th edition (also known as ES11) of the ECMAScript language, published in June 2020. It is the latest version of the ECMAScript.
Features of JS ECMA Script 2020
The new features added to the ECMA Script 2020 are given below:
Let's get some idea about all these features.
matchAll() is a new method of strings provided in ECMAScript 2020, which works with regular expressions. This method returns all the iterators that match a string against the regular expression. Each matched item is an array with some additional properties, namely, index and input.
The regular expression must have
/g flag. Otherwise, it will through a TypeError.
Syntax of martchAll()
The syntax of
matchAll() method is given below:
String - It is the reference string for which matches are to be found.
Regexp - It is a regular expression object.
return value - The return value will be an iterator
Syntax of Dynamic import
The syntax of dynamic import is straightforward, using the
BigInt values are pretty similar to number values, but there is a slight difference between them. We can not use a BigInt value with a built-in Math function.
How to create a BigInt value?
We can either create a BigInt value by appending
n after a normal numeric value or by using the
let bigNum = 123432n; // or use BigInt() function
ECMAScript 2020 introduced the
Promise.allSettled() method. This method accepts a list of promises and returns a new promise that resolves after all the input promises have either been fulfilled or rejected.
The returned promise is resolved with an array of objects that describe the result of each input promise.
This method is used when we have multiple asynchronous tasks which are not dependent on each other to complete successfully or when we want to know the result of each promise.
Syntax of Promise.allSettled() method
Iterable - The iterable parameter is a list of all input promises.
Return value - It returns a pending promise that will asynchronously fulfill when every input promise has settled.
globalThis object was introduced by the ECMAScript 2020 or ES11.
frame keywords in web browsers. In Node.js, the
global keyword is used to access the global object. In Web Workers, only the
self keyword is present.
globalThis was introduced.
This object provides a standard way to access the global object for multiple environments. By using
globalThis object, we can create a code that will work on the window(like browser where
window reference is available) and the non-window environment(backend running NodeJS) without adding any extra checks or tests.
Generally, when we don't know which environment our code will run on or when we want to make our code executable in different environments,
globalThis is used. To implement these features in the older browsers that do not support them, we have to use the polyfill.
Optional Chaining (?.)
The optional chaining operator was introduced in ECMAScript 2020. The (
Use cases of optional chaining
It accesses potentially null or undefined properties of an object.
It helps in getting results from a variable that may not be available yet.
It helps in getting default values.
It helps in accessing long chains of properties.
Syntax of optional chaining
The syntax of optional chaining is given below:
obj.val?.prop obj.val?.[expr] obj.arr?.[index] obj.func?.(args)
Nullish coalescing is a new feature of the ECMAScript 2020. It is a logical operator and is represented by the two question marks (
??). This operator accepts two operands to perform any task:
leftExpression ?? rightExpression
This operator returns the right expression if the left expression is null or undefined.
This operator is quite similar to the logical OR operator, which also returns the right-side operand value if the left-side operand is a false value, not only null or undefined.
The nullish coalescing operator has the fifth-lowest operator precedence, directly lower than
|| and now higher than the conditional (ternary) operator.
Syntax of nullish coalescing
leftExpression ?? rightExpression
In this article, we have learned about the ECMAScript 2020. Also, we have learned new features added to the ECMAScript 2020, which are given below:
We have covered all these new features in detail with code examples in the next tutorial pages. Click on the Next button to see all of them one by one.