Hello Everyone! We’re back with another exciting article on JavaScript!
In the last JavaScript article we discussed the features in ES2019 and in this article we will discuss some great features of ES2020 which will be released and implemented on all the major browsers.The features mentioned below are the “Finished Proposals” that have reached stage 4, and are included in the latest draft of the ECMAScript® 2021 Language Specification.
String.prototype.matchAll()
New method added to the String prototype. If we have a string and a regular expression, the matchAll() method returns an iterator of all results matching a string against the provided regular expression, also the capturing groups.
Dynamic Import
Dynamic imports allows us to import JS files dynamically as modules in the application.
This feature will help us access some on-demand-request code, without taking the heat of importing all the dependencies which could be a waste of resources. We can also conditionally load code in an if-else block or async-await.
So, we only import a module when and where required without polluting the global namespace.
BigInt
BigInt is a new primitive that provides us a way to represent whole numbers larger than 25^3, which is the largest number Javascript can reliably represent with the Number primitive. We can see the largest available number in javascript MAX_SAFE_INTEGER.
Anything beyond the MAX_SAFE_INTEGER starts acting funny. Let’s take a look:
Now, lets try to solve this problem using BigInt . We need to append “n” at the tail of the number which denotes that the number is a BigInt and should be treated differently by the JavaScript engine.
Promise.allSettled()
Promise.allSettled() returns a promise that is fulfilled with an array of promise state objects, but only after all the original promises have settled, i.e. become either fulfilled or rejected.In contrast to Promise.all() or Promise.race() added in ES2015, which short-circuits when any of the promises are rejected or settled respectively, Promise.allSettled runs all promises without regard to rejection of any promises.
globalThis
“It’s a pain to get the global object in portable JavaScript code. What if we called it ‘global’ everywhere?”
Well the above tweet from Daniel Ehrenberg inspired Jordan harband to propose globalThis.
It is troublesome to write portable JavaScript which accesses the global object. For browsers it’s ‘window’ or ‘self’ or ‘frames’, for Node.js it’s ‘global’, for web workers, ‘self’ and if we’re in a shell, ‘this’ might work.
So until now, we would make our own implementation of detecting runtime and then using the correct global.
Now, we can use globalThis which always refers to the global object, no matter where the code is executed:
for-in mechanics
The ECMA-262 has no specification about the order in which the for(key in Obj) should run. Major browsers have implemented a consistent order on their own till now.
Here are some test cases from before this was a concrete proposal:
You can find more such test cases here. Now, the different engines have agreed on how properties are iterated when using the for (key in Obj) control structure so that the behavior is standardized in ES2020.
Optional Chaining
If we want to access a property value that’s deep in a tree-like structure, we usually check whether it exists or not.
In other cases, many API return either an object or null/undefined, and we may want to obtain a property value from the response object only when it is not null.The Optional Chaining Operator helps us to handle such cases.
Nullish coalescing Operator
When performing property accesses, it is often desired to provide a default value if the result of that property access is null or undefined.
Let’s assume we have the following object:
At present, a typical way to express this intent in JavaScript is by using the || operator, which works fine in some cases:
But in other cases it can mess up your logic implementation:
The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (null or undefined).
import.meta
The last on the list is import.meta which is still in stage3 of the TC39 process (at the time this was written).When we are working with a module, we are concerned what’s in it. We need information about the module – its metadata. An example of module metadata for Node.js modules: the global variable __dirname which contains the path of the directory in which the current module is stored.
ES2020 will introduce the pseudo-property import.meta which holds an object with metadata for the current module.
The syntax consists of the keyword import, a dot, and the identifier meta. But here import is not an object.
The import.meta object is created with a null prototype. The object is extensible, and its properties are writable, configurable, and enumerable.
Well, that’s all for this blog post, hope you tried almost all of them on your own and are ready to put them to work with all the JavaScript jazz. We will be back with some more cool stuff. Till, then Adios!!
