What is the difference between class fields and constructor-assigned properties? Class fields और constructor-assigned properties में क्या अंतर है?

Class fields (introduced in ES2022) let you declare instance properties directly in the class body, offering a more declarative alternative to assigning them inside the constructor.

// Constructor-assigned properties (traditional approach)
class UserOld {
    constructor(name) {
        this.name = name;
        this.createdAt = new Date();
        this.isActive = true;
    }
}

// Class fields (modern, declarative approach)
class User {
    createdAt = new Date(); // evaluated for EACH new instance
    isActive = true;         // default value, doesn't need constructor
    name; // declared without initial value

    constructor(name) {
        this.name = name; // still assigned in constructor since it varies per call
    }
}

const u1 = new User('John');
console.log(u1.isActive); // true - from class field default

// Class fields are especially useful for arrow function methods (bound 'this')
class Button {
    label = 'Click me';

    // Class field with arrow function - 'this' is bound to instance automatically
    handleClick = () => {
        console.log(`${this.label} was clicked`);
    };
}
const btn = new Button();
const handler = btn.handleClick;
handler(); // works correctly - 'this' remains bound, unlike a regular method

// Static class fields
class Config {
    static version = '1.0.0'; // class-level property, not per-instance
    static #instances = 0;    // private static field

    constructor() {
        Config.#instances++;
    }
    static getInstanceCount() {
        return Config.#instances;
    }
}
console.log(Config.version); // 1.0.0
new Config(); new Config();
console.log(Config.getInstanceCount()); // 2