OOP & Classes

Object-oriented programming in JavaScript — class syntax, constructors, inheritance, and how it all maps to prototypes under the hood.

What it is, in plain English: A class is a blueprint for creating objects. It defines the properties an object will have and the methods (functions) it can perform. JavaScript's class syntax (introduced in ES2015) gives you a clean way to write object-oriented code, but it's built on JavaScript's prototype system — understanding both levels makes you a stronger developer.

Classes — blueprints for creating objects

So far you've created objects one at a time with curly braces: { name: "Alice", age: 30 }. That works fine for one object. But what if you need 100 users, each with the same structure and the same behaviours? You'd repeat yourself constantly. A class solves this: write the blueprint once, create as many objects as you need.

Defining a class

class User {
  // constructor runs automatically when you do: new User(...)
  constructor(name, email) {
    this.name  = name;    // 'this' refers to the new object being created
    this.email = email;
    this.createdAt = new Date();
  }

  // Methods — functions available on every User object
  greet() {
    return `Hello, I'm ${this.name}`;
  }

  isAdmin() {
    return this.email.endsWith("@admin.com");
  }
}

// Create instances with 'new'
const alice = new User("Alice", "alice@example.com");
const bob   = new User("Bob",   "bob@admin.com");

console.log(alice.greet());    // "Hello, I'm Alice"
console.log(bob.greet());      // "Hello, I'm Bob"
console.log(alice.isAdmin());  // false
console.log(bob.isAdmin());    // true

console.log(alice.name);       // "Alice" — access properties directly
console.log(alice.createdAt);  // the creation date

Inheritance — one class extends another

Inheritance lets you create a specialised version of a class that has everything the parent has, plus more.

class Shape {
  constructor(colour) {
    this.colour = colour;
  }

  describe() {
    return `A ${this.colour} shape`;
  }
}

class Circle extends Shape {
  constructor(colour, radius) {
    super(colour);       // MUST call super() first — sets up the parent
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }

  // Override the parent's describe()
  describe() {
    return `A ${this.colour} circle with radius ${this.radius}`;
  }
}

class Rectangle extends Shape {
  constructor(colour, width, height) {
    super(colour);
    this.width  = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

const c = new Circle("red", 5);
const r = new Rectangle("blue", 4, 6);

console.log(c.describe());            // "A red circle with radius 5"
console.log(c.area().toFixed(2));     // "78.54"
console.log(r.describe());            // "A blue shape" — inherited, not overridden
console.log(r.area());               // 24

Static methods — belong to the class, not instances

class MathHelper {
  static square(n)  { return n * n; }
  static cube(n)    { return n * n * n; }
  static clamp(n, min, max) { return Math.min(Math.max(n, min), max); }
}

// Call on the class itself, NOT on an instance:
console.log(MathHelper.square(5));     // 25
console.log(MathHelper.clamp(15, 0, 10)); // 10

// This would fail:
// const m = new MathHelper();
// m.square(5);   // TypeError: m.square is not a function

Checking type: instanceof

class Animal {}
class Dog extends Animal {}

const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Animal);  // true — Dog extends Animal
console.log(rex instanceof Object);  // true — everything is an Object

Try It Yourself

// Define a class
class Animal {
  constructor(name, sound) {
    this.name = name;    // instance property
    this.sound = sound;
  }

// Method — available on every Animal instance
  speak() {
    return `${this.name} says ${this.sound}`;
  }

// Static method — called on the class, not an instance
  static describe() {
    return "Animals are living creatures";
  }
}

// Create instances
const cat = new Animal("Whiskers", "meow");
const dog = new Animal("Rex", "woof");

console.log(cat.speak());         // "Whiskers says meow"
console.log(dog.speak());         // "Rex says woof"
console.log(Animal.describe());   // "Animals are living creatures"

// Inheritance — extends creates a subclass
class Dog extends Animal {
  constructor(name, breed) {
    super(name, "woof");  // call parent constructor
    this.breed = breed;   // add new property
  }

// Override parent method
  speak() {
    return `${super.speak()} (${this.breed})`;
  }

fetch(item) {
    return `${this.name} fetches the ${item}!`;
  }
}

const labrador = new Dog("Buddy", "Labrador");
console.log(labrador.speak());         // "Buddy says woof (Labrador)"
console.log(labrador.fetch("ball"));   // "Buddy fetches the ball!"
console.log(labrador instanceof Dog);  // true
console.log(labrador instanceof Animal); // true — inherited

Private fields, getters/setters, and class patterns

Private fields (ES2022) — truly private data

class BankAccount {
  #balance = 0;        // # prefix = private field (truly private)
  #owner;

  constructor(owner, initialDeposit = 0) {
    this.#owner   = owner;
    this.#balance = initialDeposit;
  }

  deposit(amount) {
    if (amount <= 0) throw new RangeError("Deposit must be positive");
    this.#balance += amount;
    return this;   // enable chaining
  }

  withdraw(amount) {
    if (amount > this.#balance) throw new Error("Insufficient funds");
    this.#balance -= amount;
    return this;
  }

  get balance() { return this.#balance; }   // read-only via getter
  get owner()   { return this.#owner; }

  toString() {
    return `${this.#owner}'s account: $${this.#balance.toFixed(2)}`;
  }
}

const acc = new BankAccount("Alice", 100);
acc.deposit(50).withdraw(30);   // chaining
console.log(acc.balance);       // 120
console.log(acc.toString());    // "Alice's account: $120.00"
// acc.#balance;   // SyntaxError — truly private

Getters and setters

class Temperature {
  #celsius;

  constructor(celsius) { this.#celsius = celsius; }

  get celsius()    { return this.#celsius; }
  set celsius(val) {
    if (val < -273.15) throw new RangeError("Below absolute zero");
    this.#celsius = val;
  }

  get fahrenheit()    { return this.#celsius * 9/5 + 32; }
  set fahrenheit(val) { this.celsius = (val - 32) * 5/9; }

  get kelvin()    { return this.#celsius + 273.15; }
}

const t = new Temperature(100);
console.log(t.fahrenheit);   // 212
t.fahrenheit = 32;
console.log(t.celsius);      // 0

Mixins — composing behaviour

// JavaScript has single inheritance — mixins add behaviour from multiple sources:
const Serialisable = (Base) => class extends Base {
  toJSON() { return JSON.stringify(this); }
  static fromJSON(json) { return Object.assign(new this(), JSON.parse(json)); }
};

const Timestamped = (Base) => class extends Base {
  constructor(...args) {
    super(...args);
    this.createdAt = new Date().toISOString();
  }
};

class User { constructor(name) { this.name = name; } }

class RichUser extends Serialisable(Timestamped(User)) {}

const u = new RichUser("Alice");
console.log(u.createdAt);   // ISO timestamp
console.log(u.toJSON());    // JSON string

Prototype mechanics, class fields, and the spec

What class syntax desugars to

ES2015 classes are syntactic sugar over the prototype system. The engine sees:

// class Animal { constructor(name) { this.name = name; } speak() { ... } }
// desugars approximately to:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() { return `${this.name} speaks`; };

// extends desugars to:
// Dog.prototype = Object.create(Animal.prototype);
// Dog.prototype.constructor = Dog;
// Object.setPrototypeOf(Dog, Animal); // for static inheritance

Class fields — public and private (ECMA-262 §15.7)

Class field declarations (public and private) are own properties initialised during object creation, before the constructor body runs. They use the [[DefineOwnProperty]] operation, not assignment — so they don't trigger setters on the prototype. Private fields are stored in a separate PrivateEnvironment and are only accessible via the WeakMap-like brand-checking mechanism; #field syntax is a static reference resolved at parse time.

class Example {
  publicField  = "public";   // own property, defined before constructor
  #privateField = "private"; // private — stored in [[PrivateFieldValues]]

  static staticField = "static own property on Example itself";

  #checkBrand() {
    // This method can only be called on instances that have #privateField
    // (the brand check — useful for factory pattern validation)
    return #privateField in this;
  }
}

// Private field brand check (ES2022):
function isExample(obj) {
  try { return #privateField in obj; }
  catch { return false; }
}

Species pattern and @@species

// Subclasses of Array return instances of their own type by default:
class MyArray extends Array {
  sum() { return this.reduce((a, b) => a + b, 0); }
}

const arr = new MyArray(1, 2, 3);
const filtered = arr.filter(n => n > 1);   // MyArray, not Array
console.log(filtered instanceof MyArray);  // true
console.log(filtered.sum());               // 5

// Override with @@species to return plain Arrays from map/filter:
class SafeArray extends Array {
  static get [Symbol.species]() { return Array; }
}
const safe = new SafeArray(1, 2, 3);
console.log(safe.filter(n => n).constructor === Array);  // true

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.