ECMAScript 2022

New Features in JavaScript 2022

Supported in all modern browsers since March 2023.

Browser Support

ECMAScript 2022 is supported in all modern browsers since March 2023:

JavaScript Array at()

ES2022 intoduced the array method at():

Examples

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let fruit = fruits.at(2);

The at() method returns an indexed element from an array.

The at() method returns the same as [].

The at() method is supported in all modern browsers since March 2022:

JavaScript String at()

ES2022 intoduced the string method at():

Examples

const name = "EA Academy";

let letter = name.at(2);

The at() method returns an indexed element from an string.

The at() method returns the same as [].

RegExp d Modifier

ES2022 added the /d modifier to express the start and end of the match.

Example

let text = "aaaabb";

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

RegExp Modifiers are used to spescfy case-insensitive, and other global searches:

Object hasOwn

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

Object.hasOwn() is similar to Object.hasOwnProperty() but supports all object types.

Example

Object.hasOwn(myObject, age)

Error Cause

Starting from ECMAScript 2022, the Error constructor (and its subclasses like TypeError, SyntaxError, etc.) supports an optional {cause} property.

This allows you to create chained errors - where one error includes another as its cause.

Example (before)

try {

  // Create a JSON parse failure

  JSON.parse("blablablabla");

} catch(err) {

  let text = err.name + " " + err.message;

}

Example (now)

try {

  try {

    // Create a JSON parse failure

    JSON.parse("blablablabla");

  } catch(err) {

    // Create a new error and include the original one as the cause

    throw new Error("Failed to load JSON", {cause:err});

  }

} catch(err){

  let text = err.name + " " + err.message;

  document.getElementById("demo").innerHTML = text;

}

JavaScript await import

JavasSript modules can now wait for resources that require import before running:

Example

import {myData} from './myData.js';

const data = await myData();

JavaScript Class Field Declarations

Example

class Hello {

  counter = 0; // Class field

}

const myClass = new Hello();

let x = myClass.counter;

JavaScript Private Methods and Fields

Example

class Hello {

  #counter = 0;  // Private field

  #myMethod() {} // Private method

}

const myClass = new Hello();

let x = myClass.#counter;  // Error

myClass.#myMethod();      // Error