Javascript ES2022 New Features

Hey everyone, in this article we’ll be talking about the new ECMAScript 2022 features which will be coming in in the ES2022 version in Javascript. There are quite some awesome features that are lined up for this new version of JavaScript. Let’s just go ahead and discuss some of these features which will be landing in this new version.

Table of Contents

1. Private class fields In Javascript

So the very first is coming in in JavaScript ES 2022 is Private class fields. Now so far there hasn’t been an official method to hide JavaScript class-based private variables. What do you mean by that? If you had a class, let’s say box, and if you wanted to make a variable with the value of 200 at the private variable of this class itself, there was no way in JavaScript to do that yet, but this new specification, this new feature in JavaScript allows you to have that particular functionality. Let’s take a look at this example. Now suppose if you have a color button class that extends the HTML element, you can create a button like. You can set its color, but you can also define an internal private field of this class. And the way that starts is with a “#” symbol. So whenever you put a hash symbol in front of the property name, this property automatically becomes private property of this class. That means when you create an object of this class, you cannot access whether that’s read or write. You cannot do anything within this particular object instance. Right from this particular object instance.

You can only modify these variables from the methods inside this particular class. Similarly, you can have private methods as well. You can say something function on click() and then you can define everything you want in this method. And again, this method could only be called from inside this class itself, not from the object in the outside world and the only thing you have to do is put a hash symbol over there.

2. Static class fields In Javascript

Another addition to this is the use of static variables in JavaScript. Now earlier, if you want to define a static variable or static property on a class the way you would do it, it is you will say something like the class name dot PI and then 3.14 or whatever the value you want to set. But now instead of that you can use the static keyword itself and the static keyword was already available in TypeScript for some time, but now this is available natively in JavaScript and then you can use the name of the variable which you want. But still, this could be accessed outside the class. So if you want to restrict access as well, you can put a hash symbol which makes this a static and private variable. So now you can freely use it in any of the methods which you define over there.

3. Top level Await In Javascript

Alright, the next feature, which probably is my favorite one as well out of everything coming in ES2022 is, The top-level Await. Now this has been available for some time. What this essentially does is that it brings it officially into the JavaScript seck itself. That means the browsers, the front-end can use it in their own scripts as well as the NodeJS can use it. And NodeJS has been using it for some time I guess now, but still, it will be important to have this other official spec and ES2022. Quick example for this could be something like just doing a await fetch call globally in the script itself. But before that what you have to do. You have to create an async function, boot or engine or main or something and then you would have to call this. So it could not use that await keyword without the async() function. But now you can use it in the top-level without async. Of course, you need to await anyway if you use it enough in a regular function. You still need an async function for that, but now await is also just available on the top-lev

el scope.

4 . .at() Function In Javascript

The next feature which we have and this new version of Javascript is using .at() with arrays. And the way this works is that let’s see if you have an array of numbers starting from 0. So lets say if I want to access number 3, which also has an index of 3. The way you would do it is with a notation. But JavaScript now introduces another notation which is using array .at. You can pass an index in it. The only difference between the previous method and this method is that .at() also allows you to specify negative indices. That means I can specify -1. This is obviously not the right way to right indices. This is because index starts with zero, always starts with 0. So I mean, technically speaking what the .at() thing does is that it automatically fills the array.length + for you as if you were calling it via index notation. But nonetheless it will help you make much more cleaner code if you have a lot of backward looking indexes calls. But yeah, I mean not a very big addition, but still JavaScript lot of times you will see JavaScript boring features from a lot of other languages which makes it cleaner, concise and doesn’t hurt. So its fine.

5. Object.hasOwn() Function In Javascript

Another feature which we have, another addition to JavaScript is the object.hasOwn()function. So sometimes what happens is that you need to figure out whether a property which you are calling exist on the object itselft. That is the main chain of the object or on some nested prototypes prototypal change in JavaScript. The reason we need this newer syntax with object.hasOwn() is because, I mean this pretty much suffers with the same thing.

6. RegExp match Indices In Javascript

Another feature which we have over here is the ability to have starting and ending indexes from your regular expression execution. So what this new feature would allow us to do is pass a new flag called a d flag, which would enable the matching indexes. And Of course this will not work right now again because this feature is not shipped, but this should work. Start working again 4 to 8 to twelve months, how many months it take for them to ship this and make it available with within node abd browsers and everything.

That’s pretty much it for this article. Hopefully you are excited about some of these new features of ES2022. If you are, let me know in the comments below what do you think about this?