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 frontend developer should know these JavaScript ES2020.
Optional Chaining The optional chaining is an errorproof way to access nested object properties even if an intermediate property doesnt 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 nonexist property of an object. TypeError Cannot read property x of undefined Lets 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 nonexistence city property of a person object. Using optional chaining will prevent this error and output the undefined value. 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 righthand side operand when its lefthand side operand is null or undefined and otherwise returns its lefthand 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 OR 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. 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 2 53 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 ondemandrequest code better known as code splitting without the overhead of webpack or other module bundlers. You can also conditionally load code in an ifelse block if you like.
Private Field One of the main purposes of classes is to contain our code into more reusable modules. Because youll create a class thats 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 window self or frames but in Web Workers only self will work. In Nodejs none of these work and you must instead use global. The globalThis property provides a standard way of accessing the global this value and hence the global object itself across environments.
Static Fields Static fields in classes is a new feature thats coming soon to browsers and Nodejs. It lets us add static fields for classes that do not need an instance of the class to be created to be accessed.
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
