In the following article we explore some of these great features that were added to the language with ES2019 and ES2020.
NB: The following list does not aim at being exhaustive but merely at describing some of the new stuff I am enthusiastic about.
Additionally, most of these new features are not yet supported by the major browsers but are already usable if you use the Babel transpiler or a recent version of TypeScript (>= 3.7).
This one probably is among my favorites because it allows to vastly reduce the amount of code written when dealing with complex objects and when being unsure about the content structure.
For instance, if we take the following example:
As you can see above retrieving the mother’s age was a pain and the nesting level is not even that deep. Developers already tried to solve this issue in the past and some interesting solutions such as the
delve utility function were developed. But the optional chaining operator is now a native implementation of the wanted behaviour and removes the dependency to external packages which is always appreciated.
Using this new operator allows us to reduce the code to:
In case the value called after
? is not found the program won’t crash and will return
The addition of
BigInt to JS primitives is a good thing since, for long, manipulating numbers in JS was considered hazardous. The
Number type is capped to integer values of 2**53-1 which can be really limiting.
This addition provides real built-in support for manipulating large numbers and using this new type is trivial. Just adding
n at the end of a number makes it a
There are some limitations though:
BigIntnumbers is itself a
BigInt, fractional values are truncated:
I am really looking forward for this one to be widespread because it is also a great feature that fixes the flaws of the infamous
As a reminder previously the
|| operator could produce surprising result because it would consider all falsy values…
The above example is perfectly valid but I am way less comfortable with the following 2 lines:
Using the new
?? operator solves such issue since it only deals with
undefined values instead of all the falsy ones:
I’d also like to mention two useful features that aren’t yet very widespread despite their usefulness which were brought with ES2019.
flat as its name indicates allows to reduce progressively the nesting of imbricated lists:
It takes an optional parameter that specifies how many level of nesting should be unnested.
When no parameter is provided the function defaults to 1. Therefore it is equivalent to write:
If you are dealing with a data structure with an unknown level of nesting and are sure you want everything unnested you can provide
Infinity as an argument to the
NB: Please note that a
flatMap function was also introduced and as its name indicates it combines the
flat described above with a
map loop method.
It is also worth mentioning that, in the functional programming spirit, these new methods do no mutate the array on which they are called but create a new one.
This new feature is interesting to switch from one data structure to another to best fit our development need.
For instance, given a nested lists data structure:
if I needed to access the “bob” value, I’d have to write something like:
This works but it is flawed because it relies on the list content ordering and it does not provide any context regarding the fact that I want to access the
With the the new
Object.fromEntries() function we can adopt a very much cleaner approach:
NB: The corollary feature is
Object.entries() which allows to transform an Object into a nested array structure.
The features described above are just a subset of the recent additions made to the language but these are very much likable because they allow us to write code that is much more readable and concise. As a consequence the whole development experience feels less hacky and really enjoyable overall.