New Features in ECMAScript 2020 or ES11
In this article, we are going to cover new features added to ECMAScript 2020.
ECMAScript is a general-purpose scripting language that is standardized by ECMA International according to the ECMA 262 document. It is a JavaScript standard that is used to provide interoperability to web pages across multiple browsers.
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.
Apart from JavaScript, multiple languages follow ECMAScript specifications such as ActionScript, JScript, etc.
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.
string.prototype.matchAll() Method
The 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.prototype.matchAll(regexp)
Parameters
-
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
Dynamic import
Dynamic importing allows us to import the JavaScript files dynamically as a module. This feature enables us to import any code when we require it in our Javascript code, anywhere in the code. We can even import specific function from other scripts if we want at runtime.
Syntax of Dynamic import
The syntax of dynamic import is straightforward, using the import() expression:
import(moduleSpecifier)
BigInt
As we know, JavaScript has only one data type for numbers which is a Number type. This data type represents a 64-bit floating-point number. It also represents the integers smaller than 2^53. To represent the numbers larger than 2^53-1, BigInt was introduced.
BigInt is a built-in object representing the whole number more significant than 2^53-1 which is the largest value that JavaScript could represent before BigInt. There is no limit specified as to how long a BigInt number can be.
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 BigInt() function.
let bigNum = 123432n;
// or use BigInt() function
Promise.allSettled()
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
Promise.allSettled(iterable);
Parameter
globalThis
The globalThis object was introduced by the ECMAScript 2020 or ES11.
Nowadays, JavaScript is used in a variety of environments. Apart from the web browsers, which are the most common type of host environment for JavaScript, we can also run JS programs on servers, mobile phones, robotic hardware, etc. using runtimes like NodeJS. Each environment consists of its object model and has a different syntax to access the global object. The global objects can be accessed through the window, self, or 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.
These multiple ways of accessing a global object made it difficult for developers to write JavaScript code that works on various platforms. To overcome all these problems, 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 (?.) symbol represents the optional chaining operator. It changes the way of accessing the properties from the deeply nested objects. It also resolves the problem of having to do multiple null checks while accessing a long chain of object properties in JavaScript.
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
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
Conclusion
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.
