JavaScript ES2020 has Arrived

Photo by 🇨🇭 Claudio Schwarz | @purzlbaum on Unsplash

JavaScript’s development had been running at a slower pace ahead of the introduction of ES6 (also known as ECMAScript 2015). Now, in 2020, the latest JavaScript features have been finalized and released as ECMAScript 2020 (or ES2020). While ES2020 does not include as many features as they introduced in ES6, it has introduced a number of useful additions. In this article, I will discuss my favorite new features from ES2020.

Optional Chaining

Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not. While working with objects, you must be familiar with an error of this kind:

TypeError: Cannot read property <xyz> of undefined

The above error means that you are trying to access the property of an undefined variable. To avoid such errors, your code will look like this:

Instead of checking each node, optional chaining handles these cases with ease. Below is the same example using optional chaining:

You can also check arrays and functions using Optional Chaining. An example is given below:

globalThis

JavaScript is used in a variety of environments such as web browsers, Node.js, Web Workers, and so on. Each of these environments has its own object model and a different syntax to access it. ES2020 brings us the globalThis property which always refers to the global object, no matter where you are executing your code. This property really shines when you aren’t sure what environment the code is going to run in.

The following is the example of using setTimeout function in Node.js using globalThis: