In this tutorial, you will learn about all the new Javascript features that will be added to the language in 2022. Since 2015, every year JavaScript has continued to receive yearly updates to its specification and 2022 is no different. In June 2022, the latest version of Javascript was released referred to as ES2022 (also known as ES13).
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 🔥🔥🔥
At()
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!
Class Fields
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 static, private and public allows for a better, safer and more modular class design. These common ways to restrict access to things within classes now work with Javascript classes!
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 new.
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!
If you are new to Javascript this might sound confusing, so let us start with an example of a module and take it one step at a time. A module in Javascript is, in essence, a file that uses the export feature.
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:
The ES2022 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!
Cause
The next feature is more control over exception messages. Within
You can learn more about the proposal here
hasOwn()
Within Javascript, if you want to check if an object contains a specific property, you can use the hasOwnProperty() method. Within the ES2022 release, you now get access to Object.hasOwn(). Object.hasOwn() is meant to replace the Within Javascript.
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 🤘
