ES2020 Features in simple examples
Today, we’re going to show ECMAScript features from 2015:
ES2015 a.k.a. ES6
ES2016 a.k.a. ES7
ES2020 is the version of ECMAScript corresponding to the year 2020. This version does not include as many new features as those that appeared in ES6 (2015). However, some useful features have been incorporated.
This article introduces the features provided by ES2020 in easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation.
➡️ String.prototype.matchAll ➡️ import() ➡️ BigInt ➡️ Promise.allSettled ➡️ globalThis ➡️ for-in mechanics ➡️ Optional Chaining ➡️ Nullish coalescing Operator
The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.
Dynamic import() returns a promise for the module namespace object of the requested module. Therefore, imports can now be assigned to a variable using async/await.
BigInt — Arbitrary precision integers
BigInt is the 7th primitive type and It is an arbitrary-precision integer. The variables can now represent ²⁵³ numbers and not just max out at 9007199254740992.
Promise.allSettled returns a promise that is fulfilled with an array of promise state snapshots, but only after all the original promises have settled, i.e. become either fulfilled or rejected.
We say that a promise is settled if it is not pending, i.e. if it is either fulfilled or rejected.
Standardized globalThis object
The global this was not standardized before ES10. In production code you would “standardize” it across multiple platforms on your own by writing this monstrosity:
ECMA-262 leaves the order of for (a in b)... almost totally unspecified, but real engines tend to be consistent in at least some cases.
Historical efforts to get consensus on a complete specification of the order of for-in have repeatedly failed, in part because all engines have their own idiosyncratic implementations which are the result of a great deal of work and which they don’t really want to revisit.
In conclusion, the different engines have agreed on how properties are iterated when using the for (a in b) control structure so that the behavior is standardized.
Nullish coalescing Operator
This works well for the common case of null and undefined values, but there are a number of falsy values that might produce surprising results.
The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (null or undefined). If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.
When looking for a property value that’s deep in a tree-like structure, one often has to check whether intermediate nodes exist.
The Optional Chaining Operator allows handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables.
Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it is not null:
When some other value than undefined is desired for the missing case, this can usually be handled with the Nullish coalescing operator:
Although many of these features may not be essential for the development of your Web application, they are giving possibilities that could be achieved before with tricks or a lot of verbosity.
Thanks for the summary. I'm excited for the Nullish coalescing Operator.
I've spent too much time debugging issues related to falsey checks on 0.
const value = values.zeroValue || 300;
Off hand, do you know if the right hand "else" expression is a functional call, if that expression gets evaluated even if the left hand evaluates truthy? This was a source of confusion in python 2's
array.get(key, default) operator.