Carsten Ruhr

Upcoming JavaScript Features

I recently stumbled upon this blogpost describing some upcoming features of ES2022 in short. I did a bit more research on upcoming ES features and summarised my findings. They are in no particular order and might not even make it into ES2022.

Class Fields

We will get private class fields, accessors (getter, setter) and static fields. That means no more declaring class members in the constructor and finally real private members (including exceptions if you try to access them from the outside). Yay!


New RegExp Flag

There is also an improvement (or rather additional feature) to RegExp matches. With the new /d flag you can now not only get the start index of a match-group but also a list of start- and end indices. Nifty!


Temporal

Let's be honest: JavaScripts Date is a pain in the bottom. You know this, I know this, the clerk at the corner store probably hates the Date class. In comes Temporal to the rescue. It aims to ease all the common pain points of Date and might in a lot of cases even replace moment.js or other such libraries.


Decorators

You might recognise decorators from TypeScript (or other languages). And it looks like they will finally come to vanilla JS.
Decorators allow you to replace, enrich or alter a decorated value such as classes or methods. This is generally used as a way to composite functionality. A common use-case (at least in NestJS and AngularJS) are guards to protect routes from being accessed by unauthorised users.


Pipeline operator

This one is not even in Stage 2 yet. And it doesn't solve a real problem. It's syntactic sugar to make chains of function calls more readable. Imagine you have a array with strings which you want to join, capitalise and then split again. The call might look something like this:

const result = split(capitalise(join(myArray)))

Even though it's "just how it works" this notation requires you to read the functions backward. First join, then capitalise and lastly split. The pipeline operator pipes a value through a set of functions which is under the hood of course the same but looks a bit more intuitive (at least once you got used to it).

const result = myArray
  |> join
  |> capitalise
  |> split

I am not super excited about this Feature but it's a nice to have.


Top Level Await

And lastly we get top level await functionality. Finally! No more immediately invoked anonymous functions just to start an asynchronous flow. This will make a few things easier.

And that's it for this note. I might have a closer look at one or two of those features in a future note.