Es 2022 officially released! What are the new features?

2022 year 6 month 22 Japan , The first 123 the Ecma The General Assembly approved ECMAScript 2022 language norm [1], This means that it is now officially the standard .

1 ECMAScript 2022 edit

The editors of this release are ：

• Shu-yu Guo[2]

• Michael Ficarra[3]

• Kevin Gibbons[4]

2 ECMAScript 2022 What's new ?

2.1 new class member

class MyClass {
  instancePublicField = 1;
  static staticPublicField = 2;

  #instancePrivateField = 3;
  static #staticPrivateField = 4;

  #nonStaticPrivateMethod() {}
  get #nonStaticPrivateAccessor() {}
  set #nonStaticPrivateAccessor(value) {}

  static #staticPrivateMethod() {}
  static get #staticPrivateAccessor() {}
  static set #staticPrivateAccessor(value) {}

  static {
    //  Static initialization code block 
  }
}

• You can create public attributes in the following ways (public slots) :

  • Instance public properties [5]

  • Static public properties [6]

• Private property [7] It's new , You can create :

  • Private property ( Instance private properties [8] and  Static private property [9])

  • Private methods and accessors ( The static [10]  and   static state [11])

• Static initialization code block [12]

2.2 Use  in  Operator checks private properties

This operation is also called “ Humanized way to check private attributes ”. The following expression is an example – He checked  obj  Whether there is a private attribute  #privateSlot:

#privateSlot in obj

This is a complete example

class ClassWithPrivateSlot {
  #privateSlot = true;
  static hasPrivateSlot(obj) {
    return #privateSlot in obj;
  }
}

const obj1 = new ClassWithPrivateSlot();
assert.equal(
  ClassWithPrivateSlot.hasPrivateSlot(obj1), true
);

const obj2 = {};
assert.equal(
  ClassWithPrivateSlot.hasPrivateSlot(obj2), false
);

Please note that , We can only declare its scope （scope） Internal reference private attribute .

More information about private property checking [13]

2.3 Top level in the module await

We can now use at the top of the module await And there is no need to input asynchronous functions or methods

// my-module.mjs
const response = await fetch('https://example.com');
const text = await response.text();
console.log(text);

More top layers await Information [14]

2.4 error.cause

Error And its subclasses now let us specify which error caused the current error ：

try {
  // Do something
} catch (otherError) {
  throw new Error('Something went wrong', {cause: otherError});
}

Causing the current error  err  Will be displayed in the call stack . And it can go through  err.cause Visit

More about error.cause[15]

2.5 Indexable value method .at()

Method  .at()  Let's read the elements at a given index ( It's like  []) And support negative numbers ( And  [] Different ):

> ['a', 'b', 'c'].at(0)
'a'
> ['a', 'b', 'c'].at(-1)
'c'

following “ Indexable ” Type has  .at() Method :

• string

• Array

• be-all Typed Array : Uint8Array  etc. .

2.6 RegExp match Index

If we add flags to regular  /d , Use it to generate matching objects , The start and end indexes of each group capture will be recorded （A Row sum B That's ok ）：

const matchObj = /(a+)(b+)/d.exec('aaaabb');

assert.equal(
  matchObj[1], 'aaaa'
);
assert.deepEqual(
  matchObj.indices[1], [0, 4] // (A)
);

assert.equal(
  matchObj[2], 'bb'
);
assert.deepEqual(
  matchObj.indices[2], [4, 6] // (B)
);

More about RegExp match indices[16]

2.7 Object.hasOwn(obj, propKey)

Object.hasOwn(obj, propKey)  Provides a safe way to check objects  obj  Is there a key  propKey Of its own （ Non inherited ） attribute :

const proto = {
  protoProp: 'protoProp',
};
const obj = {
  __proto__: proto,
  objProp: 'objProp',
}

assert.equal('protoProp' in obj, true); // (A)

assert.equal(Object.hasOwn(obj, 'protoProp'), false); // (B)
assert.equal(Object.hasOwn(proto, 'protoProp'), true); // (C)

Please note that ,in  Detect inherited properties （A That's ok ）, and  Object.hasOwn()  Only detect your own attributes （B and C That's ok ）.

3 FAQ

3.1  JavaScript and ECMAScript What's the difference? ？

• Long story short —— In layman's terms ：

  • JavaScript It is made up of various platforms （ browser 、Node.js、Deno etc. ） Implementation of the programming language .

  • ECMAScript It's his standard , Such as  the ECMAScript language specification[17] Described .

• Long talk and long talk , Refer to the  section “Standardizing JavaScript” in “JavaScript for impatient programmers”[18].

3.2 Who designed it ECMAScript？TC39 – Ecma Technical Committee 39

ECMAScript By the standards organization  Ecma International  Of Technical Committee 39 (TC39)  Design .

Its members are strictly companies ：Adobe、Apple、Facebook、Google、Microsoft、Mozilla、Opera、Twitter etc. .  in other words , It is usually a competitor's company that is cooperating to develop JavaScript.

Every two months ,TC39 There will be meetings attended by representatives designated by members and invited experts .  The minutes of these meetings are in  GitHub Warehouse [19] Is open .

Outside the meeting ,TC39 Also with JavaScript Various members of the community and groups work together .

3.3 How new features are recorded ECMAScript Medium ？  They have experienced TC39 Those processes ？

new ECMAScript The feature must be TC39 Submit a proposal , It will go through the following stages ：

• From the stage 0（ send TC39 Be able to comment on the proposal ）

• To the first 4 Stage （ The proposed functionality is ready to be added to ECMAScript in ）

Once a feature reaches the 4 Stage , It will be added to the plan ECMAScript in .ECMAScript The feature set of version is usually in 3 Monthly freeze .  Reach the... After the deadline 4 The function of phase will be added to next year ECMAScript In the version

For more information , see also section “The TC39 process” in “JavaScript for impatient programmers”[20].

3.4 ECMAScript How important is the version of ？

since TC39 Since the establishment of the process ,ECMAScript The importance of version has been greatly reduced .  What really matters now is at what stage the proposed function is ： Once you reach the 4 Stage , You can use it safely .  But even so , You still need to check whether your target engine supports it .

3.5 I like the most / Pay attention to the xx What progress has the proposal made ？

If you want to know what stage the various proposed functions are in , see also TC39 Proposal Library [21].

3.6 Where can I view a given ECMAScript What features have been added to the version ？

There are several places where we can check each ECMAScript New content in version ：

• stay “JavaScript for impatient programmers”, There is a chapter   List each ECMAScript New content in version [22]. At the same time, the connection of explanation is also attached .

• TC39 The library has a table , It contains completed proposals [23], It shows that they have （ Or about to ） Introduced ECMAScript edition .

• ECMAScript Linguistic normative “ Introduce ”[24] Section lists each ECMAScript New features of version .

• ECMA-262 There is one release page [25].

3.7 Free of charge JavaScript Online books

• “JavaScript for impatient programmers (ES2022 edition)”[26]  Cover until ECMAScript 2022 Of JavaScript

• “Deep JavaScript: Theory and techniques”[27]  Cover the basics of language more deeply .

Reference material

[1] The first 123 the Ecma The General Assembly approved ECMAScript 2022 language norm : https://www.ecma-international.org/news/ecma-international-approves-new-standards-6/

[2]Shu-yu Guo: https://twitter.com/_shu

[3]Michael Ficarra: https://twitter.com/smooshMap

[4]Kevin Gibbons: https://twitter.com/bakkoting

[5] Instance public properties : https://exploringjs.com/impatient-js/ch_classes.html#instance-public-fields

[6] Static public properties : https://exploringjs.com/impatient-js/ch_classes.html#static-public-fields

[7] Private property : https://exploringjs.com/impatient-js/ch_classes.html#private-slots

[8] Instance private properties : https://exploringjs.com/impatient-js/ch_classes.html#instance-private-fields

[9] Static private property : https://exploringjs.com/impatient-js/ch_classes.html#static-private-methods-accessors-fields

[10] The static : https://exploringjs.com/impatient-js/ch_classes.html#private-methods-accessors

[11] static state : https://exploringjs.com/impatient-js/ch_classes.html#static-private-methods-accessors-fields

[12] Static initialization code block : https://exploringjs.com/impatient-js/ch_classes.html#class-static-initialization-blocks

[13] More information about private property checking : https://exploringjs.com/impatient-js/ch_classes.html#private-slot-checks

[14] More top layers await Information : https://exploringjs.com/impatient-js/ch_modules.html#top-level-await

[15] More about error.cause: https://exploringjs.com/impatient-js/ch_exception-handling.html#error.cause

[16] More about RegExp match indices: https://exploringjs.com/impatient-js/ch_regexps.html#regexp-match-indices

[17]the ECMAScript language specification: https://tc39.es/ecma262/

[18]section “Standardizing JavaScript” in “JavaScript for impatient programmers”: https://exploringjs.com/impatient-js/ch_history.html#standardizing-javascript

[19]GitHub Warehouse : https://github.com/tc39/tc39-notes/

[20]section “The TC39 process” in “JavaScript for impatient programmers”: https://exploringjs.com/impatient-js/ch_history.html#tc39-process

[21] see also TC39 Proposal Library : https://github.com/tc39/proposals/

[22] List each ECMAScript New content in version : https://exploringjs.com/impatient-js/ch_new-javascript-features.html

[23] Completed proposals : https://github.com/tc39/proposals/blob/main/finished-proposals.md

[24]“ Introduce ”: https://tc39.es/ecma262/#sec-intro

[25]release page : https://github.com/tc39/ecma262/releases

[26]“JavaScript for impatient programmers (ES2022 edition)”: https://exploringjs.com/impatient-js/

[27]“Deep JavaScript: Theory and techniques”: https://exploringjs.com/deep-js/

[28] Reference to the original : https://2ality.com/2022/06/ecmascript-2022.html

- EOF -