JavaScript ES2020 Features You Should Know
Photo: Google

JavaScript ES2020 Features You Should Know

This article introduces the features provided by JavaScript ES2020 in easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation. It is beneficial that a front-end developer should know these JavaScript ES2020.

Optional Chaining

The optional chaining ?. is an error-proof way to access nested object properties, even if an intermediate property doesn’t exist. Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined will be returned.

Here is the example of one of most common error caused due to accessing non-exist property of an object.

TypeError: Cannot read property ‘x’ of undefined

Let’s see how optional chaining can rescue us to get avoid this error.

Optional Chaining With Missing Object Property

You will get an error while trying to read the non-existence city property of a person object. Using optional chaining (?.) will prevent this error and output the undefined value.

console.log(person.address?.city); // undefined

Optional Chaining With an Empty Or Null Array

When you try to access an element of an empty or null array, it will throw an exception.

Now, use optional chaining to prevent this error.

Optional Chaining With an Missing function

When we try to access a function which is null, it will throw an exception. Optional chaining will prevent this error and return an undefined value here.

Nullish Coalescing

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Contrary to the logical OR (||) operator, the left operand is returned if it is a falsy value which is not null or undefined. In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (eg. '' or 0). See below for more examples.

In this example, we will provide default values but keep values other than null or undefined.

BigInt

BigInt can be used to represent whole numbers larger than 253 – 1. BigInt can be used for arbitrarily large integers.

A bigint is created by appending n to the end of an integer literal or by calling the function BigInt that creates bigints from strings, numbers etc.

Dynamic Import

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. 

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

Private Field

One of the main purposes of classes is to contain our code into more reusable modules. Because you’ll create a class that’s used in many different places you may not want everything inside it to be available globally.

Now, by adding a simple hash symbol in front of our variable or function we can reserve them entirely for internal use inside the class.

Promise.allSettled

To wait for multiple promises to finish, Promise.all([promise_1, promise_2]) can be used. The problem is that if one of them fails, then an error will be thrown. Nevertheless, there are cases in which it is ok for one of the promises to fail, and the rest should still resolve. To achieve that, ES11 introduced Promise.allSettled.

MatchAll

matchAll is a new method added to the String prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another.

globalThis

Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use windowself, or frames – but in Web Workers only self will work. In Node.js none of these work, and you must instead use global.
The this keyword could be used inside functions running in non–strict mode, but this will be undefined in Modules and inside functions running in strict mode. You can also use Function('return this')(), but environments that disable eval(), like CSP in browsers, prevent use of Function in this way.

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self, it’s guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in.To help you remember the name, just remember that in global scope the this value is globalThis.

Static Fields

Static fields in classes is a new feature that’s coming soon to browsers and Node.js. It lets us add static fields for classes that do not need an instance of the class to be created to be accessed. They can both be private or public. It’s a handy replacement for enums.

Summary

I hope you found this article useful and are as excited as I am about the new features that are coming to JavaScript. 

Further Reading

Learn about module design pattern in JavaScript

Understand Shallow And Deep Copy In JavaScript

Object Mutation In JavaScript

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.