JavaScript — Classes

Objects from a mold

Writing similar objects by hand doesn't scale:

const dog1 = { name: "Rex",  speak() { return `${this.name} barks`; } };
const dog2 = { name: "Bella", speak() { return `${this.name} barks`; } };  // copy-paste…

A class is the reusable blueprint:

class Dog {
    constructor(name) {
        this.name = name;          // per-instance data
    }
    speak() {
        return `${this.name} barks`;
    }
}

const rex = new Dog("Rex");
rex.speak();        // "Rex barks"
rex instanceof Dog; // true

new creates an empty object, runs constructor(this = that object), returns it.

Methods live on the shared prototype

All instances share one copy of speak — memory-efficient, and why methods don't appear in Object.keys(rex).

this — the current instance

Inside methods, this = the object before the dot:

rex.speak();     // this === rex

Lose the dot, lose the binding (arrow functions inside classes help — see pitfalls).

Inheritance: extends + super

class Animal {
    constructor(name) { this.name = name; }
    eat() { return `${this.name} eats`; }
}

class Cat extends Animal {
    constructor(name, indoor) {
        super(name);              // run parent constructor FIRST
        this.indoor = indoor;
    }
    meow() { return `${this.name} says meow`; }
}

const mio = new Cat("Mio", true);
mio.eat();      // inherited ✓
mio.meow();     // own ✓

Getters / setters

class Temperature {
    #celsius = 0;                       // PRIVATE field (#)
    get fahrenheit() { return this.#celsius * 9/5 + 32; }
    set celsius(v) {
        if (v < -273) throw new Error("below absolute zero!");
        this.#celsius = v;
    }
}

const t = new Temperature();
t.celsius = 25;
t.fahrenheit;   // 77 — property syntax, method logic

Static members

Belong to the class itself, not instances:

class User {
    static count = 0;
    constructor() { User.count++; }
    static resetCount() { User.count = 0; }
}
User.count;   // access via class, not instance

Class fields shorthand

class Point {
    x = 0;                 // field defaults — no constructor needed
    y = 0;
}

Pitfalls: forgetting new (TypeError in strict mode); calling obj.method detached from its object (this vanishes — bind or use arrows); private #fields are truly inaccessible outside.

Classes power React class components (legacy), web components, and every OO-flavored library. For plain data grouping, object literals remain fine.

Mini Practice

1. BankAccount class: deposit/withdraw with balance validation via setter
2. Extend Vehicle → ElectricCar adding battery methods; call both levels
3. Add static User.compare(a,b) by age
4. Convert public field to #private; attempt outside access; read error
5. Demonstrate the detached-method this bug; fix with arrow wrapper

Next: async →