ES2022 (ES13) | Most wanted features | Very interesting

Javascript is continuously evolving and in every year it is coming up with new features which are very demanding from developer community side since it could help code to improve the code quality, reduce the final bundle size and also could help an application to improve application performance.

ES2022 Javascript will the the 13th edition :)

I could see many interesting features which ES2022 would provide. Lets see all those important features and how we can utilize those into our day-2-day coding —

Declaration of Class Level Fields

Earlier we could only declare a field inside constructor of a Class but having ES2022, we can declare a field inside a Class without having a constructor.

Example

Class can have private fields and methods

Earlier there was no way to declare a private field in a Class which can’t be accessed outside of the Class. With ES2022, you can declare a private field or a private method in a Class.

We just need to put # before a field to make it private.

Example (private field)

Example (private method)

.at() function

In JavaScript you can do arr[1] to access the value at index 1 of an Array but you cannot do arr[-1] to count backward from the ending of the Array. The reason is that the brackets syntax is used not only for arrays but also for Objects, where obj[-1] would simply refer to the property ‘-1’ of that Object.

With the .at() method we now have an easy way to access any index, positive or negative of arrays and strings:

Example

Instead of writing:

We could now be able to write like this-

Top-level Await Operator

Asynchronous functions have been used in JavaScript for a long time. Previously, we were unable to declare the await keyword outside of the asynchronous function, which resulted in an error. However, we may now declare the await operator outside of asynchronous functions and classes, which solves the synchronization issue.

The modules can now wait for resources, requiring other modules that import them to do so before performing their code.

jQuery = await import('https://cdn-a.com/jQuery');

Above code will make sure importing jquery first before executing the next line.

Ergonomic brand checks for private fields using the "in" keyword

An attempt to access a private field outside of a class currently results in an exception being thrown, rather than undefined being returned as we already seen above in this article.

We could use try/catch inside of a class to determine if a private field exists. However, the issue with this method is that it can be difficult to determine the source of an exception.

ES2022 will provide developers with the in keyword that can be used to produce a Boolean indicating the presence of a private field. This simple solution does not require a try/catch method or exceptions:

class Person{
#name = 'Suneet';
get #getName(){
return #name;
}
set #setName(){
#name = 'Anna';
}
static hasTitle(obj){
return #name in obj;
}
}

I hope this article would help you to understand the most interesting features of ES2022!!!

Stay tuned and subscribe my medium channel!!!

--

--

--

Technical Writer | Editor | Coder | Active Stackoveflow contributor | Love to learn More | Email — bansal.suneet@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 Things you need to know to about Java-Script(JS) to become a serious Front End Developer

NodeJS and MongoDB application authentication by JWT

How To Do JavaScript Localization With jQuery.i18n

Trie Data Structure

Build a Surveillance System Using Raspberry Pi, NodeJS and Pir Sensor

Introduction to Rest API | Koa JS

Use 8 languges (Javascript,Java,C#,Swift,Kotlin,Python,C++,Golang) to find the longest substring

Handling proxy in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suneet Bansal

Suneet Bansal

Technical Writer | Editor | Coder | Active Stackoveflow contributor | Love to learn More | Email — bansal.suneet@gmail.com

More from Medium

2 NEW killer features coming to TypeScript

How the Pros Handle JavaScript Promises

Meet React useEvent(): The Latest and Greatest React Hook

(A)sync Promises — How to chain Promises in sequence