JavaScript ES2020 innovations with simple examples
A photo AbsolutVision from Unsplash
Introduction
ES2020 is a version of ECMAScript, relevant for 2020. There are not many innovations in it compared to ES6, released in 2015, but there are still some useful features.
In this article, the new ES2020 features are described using simple code examples. You can quickly understand them without any complicated explanations.
Of course, to fully understand the examples presented, you need to have basic JavaScript knowledge.
JavaScript innovations in ES2020:
- String.prototype.matchAll method;
- dynamic import ();
- type BigInt;
- method Promise.allSettled;
- globalThis object
- for-in construction
- Optional Chaining statement
- Nullish Coalescing operator.
String.protype.matchAll Method
When matching a string with a regular expression, the method matchAll() returns an iterator for all results, including capture groups.
Dynamic import ()
Dynamic import() returns a promise for the namespace object of the requested module. Therefore, now imports can be assigned to a variable using the syntax async/await.
BigInt – integers of arbitrary length
BigInt is the seventh primitive type, an integer of arbitrary length. Variables of this type can now consist of 253 numeric characters, they are not limited to a numeric value 9007199254740992.
Promise.allSettled Method
Method Promise.allSettled returns a promise with an array of promise states, but only after all the original promises have been completed. We say that a promise is completed if it is not pending, that is, it is either completed or rejected.
Standardized globalThis Object
The globalThis object was not standardized until the advent of ES10. In the finished code, it had to be brought to the standard for various platforms on its own, prescribing something cumbersome, as in the example below.
For-in construction
The ECMA-262 standard leaves the design processing order for (a in b) almost completely vague, but real engines still try to be consistent in some cases.
Repeated attempts to reach agreement on determining the exact order of the for-in cycle have failed. This is partly due to the fact that all engines have their own specific application, which is the result of a lot of work that I absolutely did not want to revise.
As a result, the developers of various engines agreed on how iteration should take place according to the properties in the structure for (a in b)so that her behavior can be standardized.
Nullish Coalescing Operator
Usually, when referring to a property, it is advisable to provide a default value if the result of this call is null or undefined. Now a typical way of expressing such an intention in JavaScript is the use of the operator ||.
This method works well for regular null or undefined values, but there are a number of false values that can give unexpected results.
The Nullish Coalescing operator (the join operator with an indefinite value) is designed to handle such cases more successfully and is used to verify equality with nullary values (null or undefined). If the expression on the left side of the operator ?? evaluated as undefined or null, its right side is returned as a result.
Optional Chaining Operator
When referring to a property located deep in the tree structure, it is often necessary to add checks for the existence of intermediate nodes.
The Optional Chaining operator allows the developers to handle many such cases without repeating and / or assigning intermediate results to temporary variables.
It’s also worth noting that many APIs return or object, or null/undefined, and you may need to extract a property from the result only when it is not null.
The join operator with an indefinite value is often applicable in cases where the absence of a result should not be expressed by a value undefined.
Conclusion
JavaScript is a living language, and this has a very beneficial effect on web development. We have been witnessing its dynamic development since the advent of ES6 in 2015, and in this article we highlight the capabilities of the ES2020 version.
Probably not all of these innovations will be necessary to create your web application. But all of them allow you to do without ingenious tricks or writing a lot of code where it was required before.
