Features of ES-11
After ES-6 a new version of Ecma Script is released every year. As JavaScript developers, we need to keep up with these new releases and possibly integrate them in our own code. In this blog I will explore some interesting features of ES-11 or ES 2020, the latest version of the Ecma Script that was released.
Big Int
Prior to ES-11 JavaScript only had one type for numbers, number. Big Int now allows us to declare large numbers. There are three ways to do this
- const bigNumber=BigInt(“12222222222222”)
- const bigNumber=BigInt(12222222222)
- const bigNumber = 1222222222222n
If you check typeof bigNumber it will be of type bigint. That means in order to add a regular number to it, the number needs to be converted to bigint first.
Nullish coalescing operator ??
Say for instance we define the following object
const dog ={
name: “byron”
}
If we try and access a breed attribute by console.log(dog.breed) it will return undefined as there is no breed attribute. To fix this we might use the || operator like console.log(dog.breed || ‘poodle’), which will return the default value of poodle. But if we have the following
const dog ={
name: “byron”,
breed: “ ”
}
console.log(dog.breed|| ‘poodle’) will still print out poodle, when it is actually an empty string. This is where the nullish coalescing operator comes in. If we do console.log(dog.breed ?? ‘poodle’) we will get an empty string. The nullish coalescing operator checks if the property is undefined or null, and return the initial value if it is not undefined or null, otherwise it will return the default value.
Optional chaining operator ?.
Similar to the nullish coalescence operator, the optional chaining operator comes in handy when trying to chain events. For example if we are trying to find an html element,
const dog=document.getElementByID(“dogID”)
const breed= dog?.breed
The breed constant will have the breed property if it is not null or undefined. It is very useful when we are trying to chain complex expressions. We can use this for methods as well. For example dog.bark?.() will execute the bark method if it exists
Promise all settled
Prior to ES-11, if we were to combine promises we would need to use Promise.all(). However this relies that all of the promises will be resolved successfully and without errors, if one of the promise is rejected, the returned promise is rejected. But with Promise.allSettled(), it would settle all promises even if some of them are rejected. For example, if we have 3 promises
const p1 = new Promise((resolve, reject) => setTimeout(resolve, 200))
const p2 = new Promise((resolve, reject) => setTimeout(reject, 400))
const p3= newPromise((resolve, reject) => setTimeout(resolve, 600))
Promise.allSettled([p1,p2,p3]).then(results=>{
results.map(p => console.log(p))
})
We see that all the promises are returned, even if it is rejected. We can further iterate through the results to separate out the rejected promises. We can imagine that for more complicated promises, we can also see the reason why a promise was rejected, by accessing the reason property.
Conclusion
This was only four of the features in ES-11, there are many more. As JavaScript Developers we need to constantly learn and keep on top of new features as they are released. There are many more features available, I encourage you to check these out from the links below.
