ES2020: Features for a new decade!
The new version of ECMAScript termed as ES2020 has been released. Now for those who love ECMAScript what is a better way than to start this decade by getting to know about the features of ES2020, there are really some good new features in this version of ECMAScript, as a learner it is very important to know about the new standards and keep up with the new featues that are going on, so let’s get started with some of the features of ES2020 and have their basic knowledge.
1. String.prototype.matchAll()
There is already String.prototype.match() and the method retrieves the result of matching a string against a regular expression and by the name it must have been clear that String.prototype.matchAll() method returns all the results of a matching string against a regular expression with a minor difference from String.prototype.match(), the method retrieves an iterator of all results matching a string against a regular expression, including capturing groups.
Let’s walk through this by an example:
const regexp = /#\w*/g;
const str = ‘#cool #ecmascript #ecmascript2020’;
console.log([…str.matchAll(regexp)];)
//output
// [Array [“#cool”], Array [“#ecmascript”], Array [“#ecmascript2020”]]
2. Nullish Coalescing Operator (??)
Let us consider a very short example where we have an object having some user details like user’s name and the number of children he has:
const user = {
“userName”: “John”,
“numberOfChildren”: 0
};
console.log(user.numberOfChildren || 1);
//output: 1
now, the above will produce a result of 1, which is not quite correct as 0 is one of the falsy value inside javascript.
Now consider the same example as above with using the “nullish coalescing operator” which returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand:
const user = {
“userName”: “John”,
“numberOfChildren”: 0
};
console.log(user.numberOfChildren ?? 1);
//output: 0
3. Optional Chaining(?.)
Let us here inherit and extend the above example of a user and add a 3rd property to it of childDetails which is further an object and has optional keys in it like as follows:
const user = {
“userName”: “John”,
“numberOfChildren”: 1,
“childDetails”: {
“childName”: “Jane”
};
};
now here if i want to access the child name in cleaner way i would attempt something like this in the code:
console.log(user && user.childDetails && user.childDetails.childName);
//output: “Jane”
in an object with having another property as an object we do have write each and every property to access our final value and by using optional chaining operator we can do it in more precise, readable and easier way, here, i re-write my log using the operator:
console.log(user?.childDetails?.childName);
//output: “Jane”
the ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish, the expression returns value of undefined
4. Promise.allSettled()
This is a new function in promises, that allows us to find out all the promises that we want to execute have been settled which means that theses promises have either been fulfilled or rejected.Let us illustrate this through another example:
const p1 = new Promise((resolve,reject)=>resolve(‘p1 has been resolved’));
const p2 = new Promise((resolve,reject)=>reject(‘p2 has been rejected’));
const p3 = new Promise((resolve,reject)=>resolve(‘p3 has been resolved’));
Promise.allSettled([p1,p2,p3])
.then(response =>
console.log(response)
);
//output:
[{
status: "fulfilled",
value: "p1 has been resolved"
},{
status: "rejected",
reason: "p2 has been rejected"
},{
status: "fulfilled",
value: "p3 has been resolved"
}]
5. BigInt
BigInt is a new primitive that provides a way to represent whole numbers larger than Number.MAX_SAFE_INTEGER (2 raise to the power 53), which is the largest number Javascript can represent with the Number primitive.
A BigInt is created by appending n to the end of the integer or by calling the constructor.
You can perform the subtract, add , multiply and divide using BigInt.
const hugeNumber = BigInt(50);
hugeNumber + hugeNumber; // 100n
hugeNumber * hugeNumber; // 2500n
6. Dynamic Import
With ES2020, you can use a dynamic import can be used from scripts, not just from modules, also since dynamic import() returns a promise for the module namespace object of the requested module. Therefore, imports can now be assigned to a variable using async-await
const numbersArray = [10.5, 12, 5.1, 6.7];
const math = ‘../math.js’;
const module = await import(math);
module.ceil(…numbersArray);
Conclusion
With all of these features and many more Web development is definitely gonna take a new phase, most of the ES2020, lack supporting the old browsers.
Well with the conclusion i would like to say keep on learning and keep on JavaScripting.
Resources Used
MDN, Stage-4, tc39, github.