ES2022 JavaScript Features

Changes to be released in ES2022

Here are some of the changes currently being made to Finished Proposal.

Class Fields

• These changes are available in TypeScript since version 3.8
• Private instance methods and accessors
• Private methods and accessors (getter / setter) are added
• #Add a prefix to the method name to make it a private method. Keeping the state and behavior of the class private can prevent unintentional changes on the caller side.
• Class Public Instance Fields & Private Instance Fields
• You will be able to define private fields
• In contrast to public fields that can be referenced and written from the outside, only the class that defines the field can access it.

class  X  { // private field   #foo; method (
  ) { Console .log ( this . #foo)   } }

const testObj = new X (); 
testObj.method () 
// Output result: undefined
 testObj. # Foo 
// Output result: // Uncaught SyntaxError: Private field' # foo 
' must be declared in an enclosing class 

• Static class fields and private static methods
• You will also be able to define static methods and properties in JavaScript.
• These are called directly from the class, not the instance you created.
• Variables and methods with the same name can be defined in different classes, so you can name them without worrying about conflicts like global variables.

class  CustomDate  { // ... static epoch = new CustomDate ( 0 );}

RegExp Match Indices

• indicesProperties are added to the substring array
• Until now, the string extraction operation has returned an array containing the information of the matched string and the index information of the matched string, but in more advanced scenarios this is not enough.
• Returns an index array containing start / end index pairs for each part of the array that matches the regular expression For performance reasons, it only takes effect when the flag is set.
• TypeScript didn't seem to support this notation yet

const re1 = / a + (? <Z> z)? / d; 
// indices represents the relative value from the beginning of the input string 
const s1 = "xaaaz" ; 
const m1 = re1.exec (s1); 
m1 .indices [ 0 ] [ 0 ] === 1 ; 
m1.indices [ 0 ] [ 1 ] === 5 ; 
s1.slice (... m1.indices [ 0 ]) === "aaaz" ;

Top-level await

• It will be possible to consider it as an asynchronous function on a module-by-module basis.
• Previously, async / await could only be defined on a module's functional basis. If this is left as it is, if the loading of the module in which the asynchronous function is written is later than the timing when the function call is executed, it will be undefined returned with.
• By operating the entire module as an asynchronous function, you can prevent the function execution from occurring before the module is loaded.
• Available from version 3.8 on TypeScript

// Dependencies can be determined depending on the environment in which it is executed, and 
const strings = await  import ( `/i18n/ $ {navigator.language} ` ); 
// Modules can represent resources 
const connection = await dbConnector ();

With the release of ES2022, some features are still in the process of being assessed for Stage 3.

Based on the impression, such as described above, the advance likely new features and to Stage 4 until a future release of ES2022 Active Proposals (Stage 3) in the current study from theArbitrarily I picked it up in my own way!
I'm looking forward to next year's release.

.at ()

• It is a proposal to enable "negative subscripts" of arrays. Makes negative numbers count backwards from the last element when implemented with arr.at (-1)
• It has been coveted by many developers so far. It seems that Python can also do it, so I think there is a high need for such simple and easy-to-use functions.

Scalable Object.prototype.hasOwnProperty ()

• It Object.prototype.hasOwnPropertyis a proposal to make Object easier to use. Can be implemented as below
• It was difficult to implement using prototype, so I personally felt that it was hot to be able to use it as a built-in method of Object.

if ( Object .hasOwn (object, "foo" )) { console .log ( "has property foo" ) }

In addition, within the company, a new function called Temporal, which has been proposed for several years, is finally advancing to Stage 3 and it is exciting.