JavaScript is a powerful programming language these days, especially in web development. You can create a lot of useful things with it. Thanks to ECMAScript versions, every year we get new useful JavaScript features that make the coding process much easier.
ES2020 brought many useful and interesting features for JavaScript developers. In this article, we will learn about some of these ES2020 features that you should know. So let's get started.
1. globalThis
This is not a big feature of ES2020, but it's useful in my opinion. It's just a way to always refer to the global object.
As you know, in the browser, the global object refers to window . In NodeJS for example, there is an object global . In web workers, there is self . So this feature **globalThis **allows us to always refer to the right global object no matter what type of environment you're working on.
This is a good way to have a common global that works in all environments. Hope that I explained it well.
Here is an example:
//In the browser:
console.log(**globalThis**);
// Output: Window {0: Window, 1: global, window: Window, self: Window, document: document, name: "", location: Location, …}
//In NodeJS:
c**onsole.log(globalThis); **//returns the global object(global)
2. The Promise.allSettled function
The function Promise.allSettled() is used when we have multiple promises. It's useful to check if all promises are settled, which means that all the promises are being resolved or rejected.
The function allSettled() takes an array of promises as an argument. It returns a new promise in the form of an array containing all the statuses for each promise we passed to it.
Have a look at the example below:
const promise1 = new Promise((resolve, reject) => {
resolve('The Promise number 1 was resolved')
})
const promise2 = new Promise((resolve, reject) => {
reject('The Promise number 2 was rejected')
})
const promise3 = new Promise((resolve, reject) => {
resolve('The Promise number 3 was resolved')
})
// Using allSettled().
**Promise.allSettled([promise1, promise2, promise3])**
.then(result => console.log(result))
.catch(err => console.log(err))
//output:
[
{status: "fulfilled", value: "The Promise number 1 was resolved"},
{status: "rejected", reason: "The Promise number 2 was rejected"},
{status: "fulfilled", value: "The Promise number 3 was resolved"}
]
3. Optional Chaining
Optional chaining is useful when you have a big object that contains other nested objects and you want to check if some properties are available on that object without getting an error.
The optional chaining ?. is used to check if a value or a property before ?. is null or undefined . If it is, it returns undefined . Otherwise, it just returns the value.
const user = {
name: "Mehdi",
age: 19,
}
user.car.model;//Error.
**user?.car?.mode**l; //undefined (no error).
**user?.age**; //19
You can also use optional chaining with object methods. You just need to add the operator ?. before the parentheses when calling the methods.
Have a look at the example below:
const person = {
name: "Mehdi",
age: 19,
fullName(){
return "Mehdi Aoussiad";
}
}
person.**lastName()**; //Error.
person.**lastName?.()**; //undefined(no error).
person.**fullName?.()**; //Mehdi Aoussiad
So optional chaining allows us to always get the normal output if the functions or properties exist. If they don't exist we get undefined instead of an error.
4. BigInt
This is a very useful feature if you want to deal with large numbers. In JavaScript, there is a limit in the size of the number you can work with.
Before the feature BigInt , we were not able to go above that number limit. But now we can go beyond that.
Here is an example:
//largest integer in JavaScript
let max = **Number.MAX_SAFE_INTEGER;***
*console.log(**max**); *// Output:* 9*007199254740991*
//check the type of max.
console.log(typeof max); //number
//try to add and increase the integer(max)
++max; //output: 9007199254740992*
*++max; //output: 9007199254740992*
*++max; //output: 9007199254740992
//create BigInt
let bigOne = **BigInt(max);
**console.log(**bigOne**); //9007199254740991n
//check the type of bigOne.
console.log(**typeof bigOne**); //bigint (not number)
//try to increase
**++bigOne; **//9007199254740992n**
++bigOne; **//9007199254740993n
**++bigOne; **//9007199254740994n
As you can see, by using the constructor BigInt() , we can go beyond the maximum integer in JavaScript. So this feature gives you another type of number ( bigInt type ) to work with.
Conclusion
As you can see, all these ES2020 features are useful to know as a JavaScript developer. We didn't cover all the features in ES2020, but now we know the important ones.
Thank you for reading this article. I hope you found it useful.
Further Reading
If you are interested in more useful content related to JavaScript and web development, you can subscribe to my newsletter.
You may also like: Error Handling in JavaScript Explained With Examples