New features to be included in JavaScript after ES 2022

The JavaScript family is continually evolving, with the ES held every year, which adds new features after approval by the ECMAScript editors. The ECMA has always worked to preserve JavaScript standards in order to avoid various versions of the same JS. Since its inception in 1997, ES 2022 JavaScript will be the 13th edition. The proposed features will be added to the JavaScript family after they reach stage 4, which means they have been approved by TC-39, passed testing, and have at least two implementations. Furthermore, features in stage 3 (which have passed the test but require implementation till now) may enter the ECMAScript by completing the implementations.

Let’s have a look at the upcoming features of the ECMAScript which have already reached stage 4 and the release date of ES2022.

1. 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.

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

We may now simply perform these types of tasks, whereas previously they would result in an error. It has already been tested and implemented in three JavaScript-based browsers..

2. Class Field Declarations

Initially, we were only allowed to declare the class fields inside the constructor, but now using this proposal of stage 4 we can also declare in the class itself without a need to call the constructor.

class hello{
      fields=0;
      title;
}

Now, this syntax will not provide you with an error as it did earlier.

3. Private Methods and Fields

In this proposal, which is in stage 4, we will be able to directly declare the private class fields using the # symbol as their prefix.

class hello{
      fields=0;
      #title;
}

In the above example, the title has been declared as private and will be accessed only inside the class.

Similarly, we can set the methods and accessors private using the same symbol, and we can also use getter and setter methods simultaneously with it.

class hello{
      fields=0;
      #title;
      get #title(){
          return #title;
          }
      Set #title(){
          #title=null;
          }
}

In the above example, title() has been replaced with #title() and has been turned to private. It can now only be accessed from inside the class.

4. Static Class Fields and Private Static Methods

A static field or method cannot be accessed in every instance of a class but only in the prototype. ES 2022, will provide us with a way to declare static class fields and private static methods using the static keyword in JavaScript.

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

The static keyword can be implied for cloning objects, caching, fixed configuration.

5. Regexp Match Indices

This new proposal, which has reached stage 4, will allow us to utilize the d character to express that we also want the starting and ending indexes of the matched string. Previously, we could only obtain an array comprising extracted string and indexing information during the string-matching operation. However, in other cases, this is insufficient. So, in this new proposal, if we set the flag /d, we will additionally obtain an array with starting and ending indexes.

To retrieve the list of matches, we can use Regexp.exec or String.matchAll. Regexp.exec will return all of the results one by one, whereas String.matchAll will produce an iterator.

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

6. Ergonomic Brand Checks for Private Fields

Previously, if we attempted to access a public field that had not been declared, we received an undefined error. If we tried to access a private field, an exception was thrown. However, with this new proposal in ES2022, you will no longer be required to perform such an arduous duty. You may simply check whether a field is present in a specific class or not by using ‘in’ operator. This will also be available for private fields.

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

This will return True if the corresponding title will be present in the above list of titles.

7. .at() Function for Indexing

We had to do the indexing previously by using square brackets to fetch a specific element from the array. There was no problem with basic indexing, but when it came to backward iteration, i.e., giving negative indexing, it would be necessary to refer to the length of the string and index from that. However, now we’ll be able to index the string using both positive and negative indexes by utilizing the .at() function. For positive values, it will function similarly to square bracket indexing. However, if we input a negative index, it will begin iteration from the end.

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

Here, in the above case, both of them will return the same result of 5.

8. Scalable Object.prototype.hasOwnProperty()

It was difficult to employ a prototype object. If we used object.prototype before, it would return unavailable. Also, we must ensure that hasOwnproperty() returns just built-in methods, as if we do not have access to all of them, it will simply override them. The old solution was to use the function Object.prototype.hasOwnProperty.call(). However, a new hasOwn() function has been added, which provides the same functionality as the previously mentioned function.

const obj1={ hello:’Hi’}
let hasHello1=Object.prototype.hasOwnProperty.call(obj1, ‘hello’);
let hasHello= obj1.hasOwn(obj1, ‘hello’);
console.log(hasHello);
console.log(hasHello1);

The above functions will act in the same way and will return the same solution as True.

9. Temporal Function

Temporal is a substitute for the broken Date object. It is presently in stage 3 and is expected to replace libraries such as Moment.js. Temporal is a global object that will serve as the top-level namespace for the new date and time API, encompassing the entire spectrum of dates, times, time zones, and calendars. It will function similarly to the Unix timestamp function.

When ECMAScript 2022 will be released?

Since 2015, members of the TC-39 team have gathered once a year to discuss the available proposals. Following that, a complete list of the accepted proposals is released. This year marks the 13th edition of ECMAScript, which includes numerous useful functions. ES 2022 will take place in June 2022, and all ideas that have reached stage 4 by March 2022 will be included in JavaScript.

Conclusion

These all are the expected features that to be implemented in ES 2022 JavaScript. Hopefully, you found all the features helpful. However, update doesn’t have more features, but these features will surely make your coding easier. 

If you have any questions or suggestions drop them in the comment section below.

Happy Coding!