Keeping up with all the ECMAScript spec is not an easy task due to its constant updates, here we summed up the highlights from ES11.
Javascript has new updates every year, and there are a number of features introduced by the JS spec every year. Then it takes some time for the browsers, Node.js, etc. to roll them in, and before you know it, there’s a big pile of new JavaScript features you might have lost.
Having this rapid update cycle, rounded up the ES11 (ECMAScript 11) features that you may have missed. They include some ergonomic and other modern improvements. Let’s take a look.
Optional chaining
Optional chaining is one of those simple-but-effective nice things that just make life a little easier for JS lovers. This feature allows you to navigate object and function chains with a shorthand for dealing with null or undefined values.
Optional chaining works for simple cases like nested object data, for functions that return non-existent values, and even for functions that don’t exist as member methods on objects.
The code is more concise in expressing just what you want: If the thing exists, navigate to it; if not, return undefined.
globalThis Feature
globalThis, is an abstraction of the global object available to the current context. The most well-known and ancient of these is the window object found in JavaScript running in the browser. But environments like Node.js and web workers have their own root objects that serve precisely the same purpose: global and self, respectively.
globalThis makes code that is more portable, also eliminates existence checks by wrapping all of these root objects in the one identifier that resolves to the global root object in whatever environment the code is executing in.
This is a code example to create a polyfill.
BigInt
Before ES11 the largest integer that could be referenced in JavaScript safely was Number.MAX_SAFE_INTEGER, which resolves to 9007199254740991 (aka 2^53 – 1). This may not be a daily problem for experienced developers, but for many applications, it’s an amusingly tiny magnitude requiring programmers to use a wrapper like big-integer.
When using the traditional Number type to represent such large numbers, you will encounter unexpected rounding. (Notice these comments all apply to very small numbers as well, i.e. -2^53 – 1).
With ES11, the BigInt type is built-in for these scenarios. You can define it by adding an n to the end of a number, as in mySafeBigNumber = 9007199254740992n.
This is really a new type, not just some sleight of hand around the existing Number type. If you do typeof 12, you get a number. If you do typeof myBigNumber, you get bigInt, but, if you try anything nefarious like myBigNumber – 12, you will get an error: “Cannot mix BigInt and other types, use explicit conversions.”
BigInt also supports representation in binary, oct, and hex notation and supports all the typical math operators you might expect except the unary plus operator, whose purpose is to convert a value to a Number. The reason for this is rather obscure, in avoiding breaking changes to existing non-JS asm code.
Nullish Coalescing
Nullish Coalescing joins optional chaining in aiding us in our dealings with nullish values, also it’s a new symbol, the double question mark ??. It is a logical operator with similar behavior to the logical OR operator ||.
The difference between ?? and || is in how the operator handles nullish versus falsy values. Most JavaScript developers are familiar with how the language treats non-boolean values when testing them as true/false. For better optics of this, false, 0, null, empty strings, and undefined are considered false and everything else resolves to true.
Let’s see an example of how nullish coalescing works
Dynamic Imports
This new feature introduces an advancement in how you can import modules, by allowing for arbitrary placement of imports that are loaded asynchronously. This is also known as code splitting, something that has been done via build tools for years now. Dynamic imports is another example of the spec catching up with in-the-wild practices.
Promise.allSettled()
The promise.allSettled() method allows you to observe the results of a set of promises whether they are fulfilled or rejected. This can be contrasted to promise.all(), which will end with a rejected promise or error non-promise. promise.allSettled() returns an array of objects describing the results of each promise.
This is useful when watching a group of unrelated promises. That is, you want to know what happened to them all, even if some in the middle fail.
The catch lambda does not fire in this case. Instead, the then clause executes, and an array with key:value content is returned. The key takeaway here is that the third promise has run and we can see its outcome even though promise2 failed before it.
Export Star Syntax
This feature adds the ability to export *(Star syntax) from a module. You could already import * from another module, but now you can export with the same command
This is a kind of module chaining, allowing you to export everything from another module from inside the current module, quite useful if you are building a module that unites other modules into its API, for example.
A Constant-Updated Spec
When you are working in the tech industry you will undoubtedly experience the constant evolution of things. Programming languages are one of the most fundamental expressions of all, where much of the philosophy of computer science meets the reality of day-to-day coding. With ES11 JS continues to grow in response to those forces with its yearly release schedule.
