This latest version has some pretty nifty features that include some pretty useful features that will help you write cleaner and more concise code. If you want to learn what these features are, you have come to the right place 💥
If you are wondering how to get started using ES2022, the good news is that most browsers already support its proposed features. I have tested all the code contained in this guide in Chrome and it all works perfectly. If you need to support certain legacy browsers, remember to check CanIUse.com to see which browser support which features. Asides from that, if learning about some new feature sounds exciting to you, read on 🔥🔥🔥
The first feature we will look at is a new function called 'at()'. 'at()' can be used to improve the readability of your code whenever you need to select items from arrays or strings. Currently, if you want to pick items from an array or a character from a string, you would write code like this:
This type of code can now be simplified using 'at()'. 'at()' takes a single argument, the position in the items that you want to grab. What might be slightly surprising is that this number can either be a positive or a negative number:
As you can clearly see, this second way of accessing things is much simpler, with less chance of writing code that contains accidentally null reference exceptions as well!
The second feature that I think you should be most excited about is the accessor improvements to properties, fields and methods contained within classes. If like me you have come from a C#/Java/object-oriented background, you are used to being able to define different access modifiers to members contained within your classes.
Being able to define access rules using
To detail these new changes, first, let us look at where we have come from:
There is nothing too special about this code, we define a class with some constructor parameters, job done. In the new word you have a lot more control over how you can define things. First, let us start simple with a
public instant property.
public: To allow something to be externally accessed on the object, you define it with
public access rights. You do not need to add any specific keyword to make something
public, simply define things in your class as normal like this:
In this example, I have defined a class with two public properties. You can access these properties when you 'instantiate' an object based on that class without any warnings. This is
public in action!
What happens if we do not want those properties to be accessed externally, this is where the
private modifier comes into play
private: When something is marked as private it can NOT be accessed by code outside of the class itself.
private fields and methods are marked using the
# operator. Below shows an example that contains a combination of private fields and methods:
Any attempt to access things marked as
private will result in an error being thrown!
static: Sometimes, you might want to access values from a class without having to create a new object using
new. Maybe, you want to create a utility function that does not contain any class scope. This is where the
static modifier comes into play:
The important thing to notice in the code above is that there are no objects being created., e.g. there is no use of
The code accesses the properties/methods directly from the class definition 🔥🔥🔥
await() allowed in top-level modules
The next feature is an improvement in where you can use the
await operator. Previously, you could only use
await within a class or method that was marked as
async. In ES2022, you can now use the
await operator anywhere in your modules class structure, e.g. you can use it outside an async method!
Data and functions exported from a module are imported into other classes using the
import feature. Let us take this basic vanilla JS example:
Note, the function is being
exported. To access this module's feature in another file, say my
index.html, I could create this code:
await improvement comes within the module file. You can now make async calls within the top-level part of the file, like this:
This code previously would have thrown an error!
The next feature is more control over exception messages. Within
You can learn more about the proposal here
hasOwnProperty() method. Within the ES2022 release, you now get access to
You can find a complete list of the proposed EM2022 features here.
If you want to play around with these new features using a working website, you can clone my ES2022 sample site from my GitHub here for free today! Happy Coding 🤘