New JavaScript Features in ES2022 That You Should Know

The JavaScript family is ever-evolving and is set to launch new JavaScript features in June 2022. The ES2022 will be the 13th edition of features after it was initially launched in 1997. The ES2022 features that reach the stage 4 verification are added to the JavaScript family. Reaching Stage 4 means that the features have been approved by TC-39, cleared the testing stage, and have at least passed two implementations. Furthermore, ES2022 features that have crossed stage 3 and are only awaiting implementation might enter the ECMAScript.

Let’s get started!

Table of contents:

- ES2022 features you must know!

• Await operator at the top-level
• Class field declarations
• Private methods and fields
• Static class fields and private static methods
• Regexp Match Indices
• Ergonomic brand checks for private fields
• .at() function for Indexing
• Temporal function

- Conclusion

JavaScript features: ES2022 features you should know

As a developer, you must know and understand the new JavaScript features to stay updated. Here is a list of new JavaScript features in Stage 4 and will be part of the JavaScript family from June 2022.

JavaScript features: Top-level await operator introduced in ES2022

Asynchronous functions have been used in JavaScript for some time now. In the previous versions, developers could not declare the await keyword outside the asynchronous function. If done, it would show an error message. Now, you can declare the await operator even outside of the asynchronous functions and classes. This solves the synchronization issue. The modules are now capable of waiting for resources that require other modules to import them before rendering the code.

import {getUser} from ‘. /data/User’
let user=await getUser();

JavaScript features: Class field declarations - A stage 4 ES2022 feature

Remember, how you always had to invoke a constructor to declare a class field? Not anymore. Now you can declare the class field without calling the constructor.

class hello{
fields=0;
title;
}

This syntax will not give you an error message now.

JavaScript features: Private methods & fields

Looking to declare a private class? You will be able to do this by just adding # as its prefix.

class hello{
fields=0;
#title;
}

Aren’t the new JavaScript features just amazing!

JavaScript features: Static class fields & private static methods

Other than the prototype, a static class field cannot be accessed in all instances of a class. The new addition of ES2022 features will give us the freedom to declare static class fields and private static features by using the keyword “static”.

class hello {
name;
static title=’here’;
static get title(){
return title;
}
}

The keyword “static” can be invoked for catching, fixed configurations and cloning objects.

JavaScript features: Regexp match indices - A JavaScript ES2022 feature

This new, stage 4, ES2022 JavaScript feature will allow you to use the character “d” to express that you want the starting and ending indexes of the specified matched string. Previously this was not possible. You could only obtain indexing data in the process of string-matching operation.

To retrieve the list of matches

• You can use Regexp.exec - this will return all the results one after the other
• String.matchAll. - this will give you an iterator.

const animals=’Animals:cow,dog,horse’
const regex=/(cow)/gd;
const matches=[…fruits.matchAll(regex)];
matches[0]

JavaScript features: Ergonomic brand checks for private fields

In the previous versions, if you tried to access a public field that wasn’t declared - you would receive an undefined error. Similarly, if you tried to access a private field - you would get an error message.

ES2022 is at your rescue, making your life much easier. By using the “in” operator, you will get the flexibility to check if a field is present in a specific class or not. This feature will be made available even in the private classes.

class hello{
name;
#title;
get #title(){
return #title;
}
set #title(){
#title=null;
}
static hasTitle(obj1){
return #title in obj1;
}
}

JavaScript features: .at() function for indexing

Previously, square brackets were used to index or fetch specific elements in an array. The process was easy unless you had to conduct a backward iteration i.e. required negative indexing. In the case of negative indexing - you had to refer to the string length and index from there. This process has been simplified by the use of the .at() function.

array= [1.2.4.5]
console.log(array[array.length-1]);
console.log(array.at(-1));

In the case of positive indexing, the .at() will function exactly as square brackets. For negative indexing, the .at() function will start the iteration from the end.

JavaScript features: Temporal function

This is a stage 3 ES2022 JavaScript feature that is expected to replace libraries like Moment.js. Temporal will substitute for broken Date object. Its functioning will be to the Unix timestamp function. The temporal function will be a global object and will serve as a top-of-the-class namespace for date and time API calls. The temporal function will encompass dates, time zones, calendars and times.

JavaScript features: Conclusion

So we have learned about the new ES2022 JavaScript features that would improve your efficiency. These ES2022 JavaScript features are all set to be launched in June of 2022. However, these are all just expected features. The stage 4 features will definitely make it to the final JavaScript update. However, the stage 3 features, if not implemented well, might not be included in the ES2022 update.

These are the highly anticipated features of the all-new JavaScript ES2022 update. For more updates like these, visit Turing.

Resources:

https://inspiredwebdev.com/everything-new-in-es2022/
https://widgetcore.com/new-features-to-be-included-in-javascript-after-es-2022/
https://medium.com/@bsalwiczek/4-most-important-features-coming-in-es2022-that-you-should-know-about-f7e18c1bff9b
https://dev.to/jasmin/whats-new-in-es2022-1de6
https://exploringjs.com/impatient-js/ch_new-javascript-features.html