Favorite New Features in ES2020 - JavaScript tutorial

Favorite New Features in ES2020 - JavaScript tutorial

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. Looking at the top new features of ECMAScript 2020

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:

Image for post

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

Image for post

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

Image for post


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. ES2020brings 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:

Image for post

Below, the same method is used in web browser:

Image for post


Dynamic Imports

Dynamic Imports is one of my favorite feature of ES2020. As the name implies, you can import modules dynamically. Using dynamic imports, the code is delivered via smaller bundles as required (instead of downloading a single large bundle as has been previously required).

When using dynamic imports, the import keywords can be called as a function, which returns a promise. Below is an example of how you can dynamically import a module when the user clicks on a button:

Image for post


Promise.allSettled()

This method returns a promise that resolves after all of the given promises are either fulfilled or rejected. It is typically used where asynchronous tasks do not depend upon one another to complete successfully, as illustrated in the following example:

Image for post


Nullish Coalescing Operator

The syntax for this operator is

let student = {}
let name = student.name ?? ‘John’

This operator will return a Right Hand Side operand when the Left Hand Side operand is either undefined or null. In the example above, the operator will set the value of name as ‘John’ as student.name is undefined.

At first glance this looks exactly the same as a logical OR operator ( || ), however, logical OR operator Right Hand Side operand when Left Hand Side Operand is false (undefined, null, “”, 0, false, NaN). Below is the comparison of both operators:

Image for post

Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators

It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis

Image for post


Conclusion

The introduction of ES2020’s new features add even more flexibility and power to the constantly evolving JavaScript. This article explored some of my favorite features but there are a number of others that I’d suggest you look into to see what might suit you best. I hope you found this article useful and that you are as excited as I am about using these features!

javascript javascript-development ecmascript-2020 es2020

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript Roadmap in 2020 | How To Become A JavaScript Developer

JavaScript Roadmap will provide you with a detailed roadmap to begin your career as a JavaScript Developer in 2020.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

JavaScript: Guide to New ECMAScript 2020 Features

ECMAScript is the specification upon which JavaScript is based. And since 2015, it has been evolving year after year, with the addition of features like classes, modules, async/await and many others.

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.