ECMAScript 2022

JavaScript version number

Old ECMAScript versions are named by numbers: ES5 and ES6.

Starting from 2016, versions are named by year: ES2016, 2018, 2020, 2022.

New features of ES2022

• Array at()
• String at()
• RegExp /d
• Object.hasOwn()
• error.cause
• await import
• Class field declarations
• Private methods and fields

JavaScript Array at()

ES2022 introduced array methods at():

Example 1

Get the third element of the 'fruits' array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
let fruit = fruits.at(2);

Try it yourself

Example 2

Get the third element of the 'fruits' array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
let fruit = fruits[2];

Try it yourself

at() This method returns the element at the specified index from the array.

at() Method is similar to [] The returned results are the same.

Starting from March 2022, all modern browsers support at() Method:

JavaScript String at()

ES2022 introduced string methods at():

Example 1

Get the third letter of the 'name' string:

const name = "W3Schools";
let letter = name.at(2);

Try it yourself

Example 2

Get the third letter of the 'name' string:

const name = "W3Schools";
let letter = name[2];

Try it yourself

at() Method returns the character at the specified index from the string.

at() Method is similar to [] The returned results are the same.

Starting from March 2022, all modern browsers support at() Method:

RegExp d modifier

ES2022 adds /d Modifiers, used to indicate the start and end of a match.

Instance

let text = "aaaabb";
let result = text.match(/(aa)(bb)/d);

Try it yourself

RegExp modifiers are used to specify case-insensitivity and other global searches:

Object.hasOwn()

ES2022 provides a safe method to check if a property is an own property of an object.

Object.hasOwn() Similar to Object.prototype.hasOwnPropertybut supports all object types.

Instance

Object.hasOwn(myObject, age)

Try it yourself

Error Cause

ES2022 allows specifying the root cause of an error through error.cause.

Instance

connectData(); 
  catch (err) { 
} 
  throw new Error("Connecting failed.", { cause: err }); 
}

Try it yourself

JavaScript await import

JavaScript modules can now wait for required resources before execution:

import {myData} from './myData.js';
const data = await myData();

JavaScript class field declarations

class Hello {
  counter = 0; // class field
}
const myClass = new Hello();
let x = myClass.counter;

Starting from April 2021, class field declarations are supported in all modern browsers:

JavaScript Private Methods and Fields

class Hello {
  #counter = 0;  // Private Field
  #myMethod() {} // Private Method
}
const myClass = new Hello();
let x = myClass.#counter; // Error
myClass.#myMethod();      // Error

Starting from June 2021, private methods and fields are supported in all modern browsers: