ES2022 Preview - What Are The New Features In ES2022

const arr = [100,200,300,400, 500];
arr[2];  //200
arr.at(2); //200

arr[arr.length -2]; //400
arr.at(-2); //400

const str = "Test"
str[str.length - 2] // 's'
str.slice(-2)[0]    // 's'
str.at(-2) // 's'

const getEmployeeDetail = async (empId) => {
    try {
        return await fetch(`https://api/employee/${empId}`);
    } catch (error) {
        throw new Error(`Loading data Failed for employee id ${empId}.`, {
            cause: error
        });
    }
}
try {
    const employee = await getEmployeeDetail(1);
} catch (error) {
    console.log(error); // Error: Loading data Failed for employee id 1.
    console.log(error.cause); // TypeError: Failed to fetch
}

class Employee {
    #name = "Test"; // private field
    setName(name) {
        this.#name = name;
    }
}
const emp = new Employee();
emp.#name = 'New'; // error
emp.setName('New'); // ok

class Employee {
    #name = "Test";
    constructor(name) {
        this.#setName(name) // ok
    }
    #setName(name) { // Private method
        this.#name = name;
    }
}
const emp = new Employee('New'); // ok
emp.#setName('New'); // error

4) Public static class fields and private static class fields and methods

A static field or method cannot be accessed in every instance of a class, but only in the prototype. In the ES2022, to define static fields and static public/private methods by using the static keyword.

Prior to ES2022, a class‘s static fields are declared outside of the class body.

class Employee {}
Employee.name = "Test"

In ES2022, the static keyword may be used to specify a class‘s public static fields and private static methods inside of the class body.

Public Static Fields

class Employee {
    static name = "Test" // Public Static Field
}

Private Static Fields

class Employee {
    static #id = 1; // private static field
    static #getNextId() { // private static method
        return Employee.#id++;
    }
    #id; // instance private
    constructor() {
        this.#id = Employee.#getNextId();
    }
}
const emp = new Employee();
emp.id; // 2

5) Ergonomic Brand Checks for Private Fields

Before ES2022, if we try to access a public field that is not declared we will get an undefined error. If we try to access a private field then, an exception will be thrown. In this case, we could use try/catch inside of a class to check if the private field exists or not.

In ES2022, we can check whether the private field is present in a specific class or not by using "in" operator. This will also be available for public fields.

class Employee {
    #name = 'Test';
    get #getName() {
        return #name;
    }
    set #setName() {
        #name = 'New';
    }
    static hasName(obj) {
        return #name in obj; // check name property is available or not in the object
    }
}

The "in" keyword will return a boolean value which indicates the presence of a private field. This simple solution does not require a try/catch method or exceptions.

6) Top-level Await

We are using asynchronous functions in JavaScript. Previously, we cannot declare await keyword outside of asynchronous function. But ES2022 allows us to declare the await operator outside of asynchronous functions and classes, which solves the synchronization issue.

It is used to load the modules dynamically

const lang = await import(`/i18n/${navigator.language}`);

It is used to conditionally render modules

const location = "india"

if(location === "india") {
  await require('/data-india.js')
} else {
  await require('/data.js')
}

7) Object.hasOwn(obj, propKey)

It is a static method, used to check that propKey is the own property of object. It is similar to Object.prototype.hasOwnProperty but it supports all object types.

const example = {
  property: 'Test'
};

console.log(Object.prototype..call(example, 'property')); // old way
console.log(Object.hasOwn(example, 'property')); // new way

8) RegExp Match Indices ('d' Flag)

If we set the flag /d to regular expressions, we will get the matched strings with an array with starting and ending indexes.

To get the list of matches, we can use RegExp.exec or String.matchAll. RegExp.exec will return all of the results one by one and String.matchAll returns an iterator.

const fruits = 'Fruits: apple, applefruit, orange'
const regex = /(apple)/gd;
const matches = [...fruits.matchAll(regex)];
matches[0];

//output:
//[
// "apple",
// "apple",
// groups: undefined
// index: 8
// indices:[]
//  [8, 13],
//  [15, 19]
//]

In the above example, it returned [8,13] means the indices of the first occurrence of "apple" in the input string.

Summary

In this article, you have learned about which new features are coming as a part ES2022 release.