Adam Love

View Original

Best features of ES2020

ES2020 is the 11th version of what has now become one of the most popular programming languages. JavaScript has come a long way in the last few years and I would even go as far as saying I enjoy working with it now (shock horror!). For 2020, we gain a few additional features which, although minor, have the potential to forever change how we solve some problems whilst working with JavaScript.

Optional Chaining

I cannot understate my excitement about this feature! Although minor, it is something that has driven me insane for years. Previously, whilst working with JS, we have had to jump through hoops when dealing with nested objects and checking for potential undefined values. Consider the following example:

Obtaining the error within the nested object requires manually checking if any of the values are undefined. We could potentially refactor the above function to look like:

I'm not a fan of this syntax. It looks horrific and it's not the best in terms of readability. (Not to mention writing that many brackets is painful). However, now with ES2020 we can utilise optional chaining 🎉!

The ?. operator functions like the . chaining operator, except that instead of throwing an error if a reference is nullish, the expression short-circuits with a return value of undefined

Note that you may also use optional chaining when attempting to call a method which may not exist. (Not that you should make a habit of this)...

Yes, we can also use optional chaining with arrays and objects.

Nullish Coalescing

In JS, the regular way of short-circuiting values (using the || or operator) is flawed due to the nature of how it checks if a value is falsey rather than empty. I.e. it treats false, undefined, 0 and null the same (even if false or 0 may be valid options).

ES2020 introduces the ?? operator which only evaluates to the right-hand side when the initial value is null or undefined.

Legacy Method (Short-circuiting):

Nullish coalescing method:

Promise.allSettled

I love this one. If you're a big user of Promise.all you would have, no doubt, occasionally wished that you could tell when all of your promised were resolved or rejected. In the current implementation Promise.all rejects as soon as one promise is rejected, even while there may still be others pending. This is great in some use cases, however, sometimes you want to know when all the promises have finished working.

allSettled behaves in such a manner. It only resolves when all of the promises have finished working and become fulfilled or rejected. It is never rejected, only pending or resolved. Its return value is a pending Promise that will be asynchronously fulfilled once every promise in the specified collection has completed. For each outcome, a status string is returned (either fulfilled or rejected). If the status is fulfilled a value is also returned. If the status is rejected, a reason is present instead.

String.matchAll

The function name says it all. It's like match but extracts all references of a text match. matchAll returns an iterator. You can iterate over the values with for..of or you can convert it to an array.

Dynamic Import

Dynamic imports can help reduce bundle size by loading dependencies on demand. The dynamic import structure returns a promise (which means you can use async/await.

globalThis

JavaScript is objects. Objects are JavaScript. There's always one big object that contains all the things. In browsers, that object is known as window. In Node, that object is global. WebWorkers use self - you get the picture. Trying to access the wrong object will throw an error in your application. globalThis abstracts away this issue. You can now refer to the parent object with globalThis without worrying about which context you're in. (This change is backwards compatible hence the weird name).

BigInt

There is a new type BigInt that represents a number greater than Number.MAX_SAFE_INTEGER (2^53 - 1). Whilst not relevant to my work, BigInt may be handy to those working in machine learning. To utilise, just add n to a number.

Note: You cannot mix up numbers and BigInts - you must coerced to either type before performing algebra.