1. Class Fields, Private Methods & Accessors (# Syntax)

Prior to ES2022, all properties assigned to a JavaScript class instance were publicly enumerable and mutable. Developers wishing to protect internal state had to rely on TypeScript's compile-time private keyword (which is erased upon compilation to JavaScript) or manage private state in out-of-band WeakMap instances.

ES2022 introduced native Class Public and Private Fields using the hash prefix (#):

• Hard Private Encapsulation: Private fields (#field) cannot be accessed, inspected, or overwritten from outside the lexical class declaration body. Attempting to access instance.#field throws a compile-time SyntaxError, not a runtime undefined.
• Private Methods & Getters/Setters: Developers can encapsulate internal helper functions and computed accessors:

class BankAccount {
    accountHolder;      // Public field
    #balance = 0;       // Hard private field

    constructor(holder, initialDeposit) {
        this.accountHolder = holder;
        this.#balance = initialDeposit;
    }

    #calculateInterest() { // Private method
        return this.#balance * 0.045;
    }

    get statement() {
        const projected = this.#balance + this.#calculateInterest();
        return `Account: ${this.accountHolder} | Balance: $${this.#balance} | Projected: $${projected}`;
    }
}

const account = new BankAccount("Alice", 10000);
console.log(account.statement);
// console.log(account.#balance); 
// ❌ SyntaxError: Private field '#balance' must be declared in an enclosing class

2. Static Class Fields & Static Initialization Blocks

Classes can now declare public static fields, private static fields, and dedicated Static Initialization Blocks. Static initialization blocks allow complex, multi-statement initialization logic to execute once when the class is first loaded into memory:

class DatabaseConnectionPool {
    static #poolSize = 10;
    static activeConnections = [];

    static {
        // Executes once upon class declaration
        try {
            for (let i = 0; i < DatabaseConnectionPool.#poolSize; i++) {
                DatabaseConnectionPool.activeConnections.push(`connection_socket_${i}`);
            }
        } catch (err) {
            console.error("Static pool initialization failed", err);
        }
    }

    static get poolStatus() {
        return `Available: ${this.activeConnections.length} sockets`;
    }
}

console.log(DatabaseConnectionPool.poolStatus); // ✅ "Available: 10 sockets"

3. Object.hasOwn(): Bulletproof Property Inspection

For two decades, developers checked whether an object owned a specific key using obj.hasOwnProperty('prop'). However, this classic pattern contained two severe vulnerabilities:

1. Prototype Overwrite Hazard: If an object has a custom property named hasOwnProperty, calling the method invokes the property rather than the Object.prototype function.
2. Objects Without Prototypes (Object.create(null)): Objects created without prototype chains lack hasOwnProperty entirely, throwing a fatal TypeError: obj.hasOwnProperty is not a function.

Object.hasOwn() solves both issues as a static utility method that operates safely across all objects:

// Object created with null prototype (common in dictionary lookups)
const dictionary = Object.create(null);
dictionary.key = "value";

// ❌ Legacy failure:
// dictionary.hasOwnProperty("key"); // TypeError: dictionary.hasOwnProperty is not a function

// ✅ Safe ES2022 method:
console.log(Object.hasOwn(dictionary, "key")); // true
console.log(Object.hasOwn(dictionary, "missing")); // false

4. Error.cause: Diagnostic Error Chaining

In distributed microservices and asynchronous pipelines, low-level errors (e.g. database socket timeouts or DNS lookup failures) frequently need to be caught and re-thrown as high-level application exceptions. Previously, wrapping errors caused developers to lose the original stack trace unless they wrote custom error classes.

ES2022 introduced the optional { cause } parameter to the Error constructor, creating an unbroken chain of diagnostic provenance:

async function fetchUserProfile(userId) {
    try {
        const response = await fetch(`https://api.internal/users/${userId}`);
        return await response.json();
    } catch (networkError) {
        // Wrap with contextual domain error while preserving root cause
        throw new Error(`Failed to load profile for user ${userId}`, { cause: networkError });
    }
}

Modern Node.js and browser consoles automatically print the full hierarchical error chain, drastically accelerating root cause diagnosis during production outages.

5. Array.prototype.at(): Ergonomic Relative Indexing

Accessing the last item in a JavaScript array historically required repetitive syntax: arr[arr.length - 1]. While Python and Ruby allow direct negative indices (arr[-1]), JavaScript's bracket notation treats -1 as a string dictionary key.

Array.prototype.at() provides clean relative indexing across Arrays, TypedArrays, and Strings:

const servers = ["node-alpha", "node-bravo", "node-charlie", "node-delta"];

console.log(servers.at(0));   // ✅ "node-alpha" (first item)
console.log(servers.at(-1));  // ✅ "node-delta" (last item)
console.log(servers.at(-2));  // ✅ "node-charlie" (second to last)

const greeting = "Hello World";
console.log(greeting.at(-1)); // ✅ "d"

6. RegExp Match Indices (The /d Flag)

When parsing text with regular expressions, developers often need to know the exact start and end character positions of matched capture groups. The new /d regex flag generates an indices property on the match object:

const pattern = /(WebDesigner).(la)/d;
const text = "Visit WebDesigner.la for modern web architecture.";
const match = pattern.exec(text);

console.log(match.indices[0]); // [6, 20]  (Full match bounds: "WebDesigner.la")
console.log(match.indices[1]); // [6, 17]  (Group 1: "WebDesigner")
console.log(match.indices[2]); // [18, 20] (Group 2: "la")

7. Top-Level await in ES Modules

Prior to ES2022, the await keyword could only be used inside an async function body. Initializing asynchronous resources at the module root required clunky Immediately Invoked Async Function Expressions (IIAFE).

With Top-Level Await, ECMAScript Modules (ESM) act as large async functions, pausing dependent modules until module-level promises resolve:

// config.js - Native top-level module initialization
const response = await fetch("https://api.internal/config/runtime.json");
export const runtimeConfig = await response.json();

Top-Level Await simplifies dynamic dependency loading, database connection handshakes, and fallback CDN resource imports across modern Node.js and browser environments.