preface

Either ES2021 or ES12 was released earlier this summer (for specific NEW ES2021 features, check out here), and now let’s see what interesting new features ES2022 will bring.

Proposals that have been accepted in the latest draft of the specification are introduced and explained in this article.

Note: Each feature proposal follows a process in which it goes through various stages up to Stage 4, which indicates that the new features are ready to be included in the official ECMAScript standard and will be included in the earliest practical standard revisions. The following features are complete, in Stage 4, and added to the latest draft of ECMAScript.

Declare the fields of the class

So far in the ES specification, the field definition and initialization of a class is done in the constructor of the class. But in the new proposal, class fields can be defined and initialized at the top level of the class

Private methods and fields

Use the # prefix to define the class’s private methods and fields.

Class static public methods and fields

Add static public fields, static private methods, and static private fields to JavaScript classes based on the field and private method proposals of previous classes.

Regular matching index

The proposal provides a new/dFlag to obtain additional information about the start and end of each match in the input string.

Here’s an example:

Note: Include begin, but not end

Top-level await

The top-level await allows the await keyword to be used outside of asynchronous functions. This proposal allows modules to be treated as large asynchronous functions, so these ECMAScript modules can wait for resources to load, so that other modules that import these modules will wait for resources to load before starting their own code

Detecting private fields

When we try to access an undeclared public field, we get undefined results, and accessing a private field throws an exception. We use these two behaviors to determine whether there are public and private fields. But this proposal introduces a more interesting solution, which involves using the IN operator to return true if the specified property/field is in the specified object/class, and also to determine private fields

Add.at() methods to all built-in indexable data

Add a new array method that retrieves an element by a given index. When the given index is positive, this new method behaves the same as access using the parenthesis notation, but when we are given an index of a negative integer, it works just like Python’s “negative index”, which means that the at() method is indexed by a negative integer, counting backwards from the last item in the array. So this method can be executed as array.at(-1), which behaves the same as array[array.length-1], as you can see in the following example

Object.hasOwn(object, property)

In short is the use of the Object. The hasOwn instead of Object. The prototype. The hasOwnProperty. Call (too long, not good-looking)

The ECMAScript class statically initializes blocks

The Class static Block proposal provides an elegant way to evaluate statically initialized code blocks during class declaration/definition, with access to the private fields of the class

Note: Typescript4.4 is also supported

reference

  • Github.com/tc39/propos…
  • 2 ality.com/2021/09/cla…
  • Tc39. Es/process – doc…
  • tc39.es/ecma262/
  • V8. Dev/features/to…
  • Developer.mozilla.org/en-US/docs/…
  • Developer.mozilla.org/en-US/docs/…
  • Developer.mozilla.org/en-US/docs/…