JavaScript Classes Guide

Classes in JavaScript provide a cleaner syntax for creating objects and implementing inheritance. Here's a comprehensive guide.

Basic Class Syntax#

// Class declaration
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I'm ${this.name}`;
  }

  getInfo() {
    return `${this.name}, ${this.age} years old`;
  }
}

const john = new Person('John', 30);
john.greet();  // "Hello, I'm John"

// Class expression
const Animal = class {
  constructor(name) {
    this.name = name;
  }
};

// Named class expression
const Dog = class DogClass {
  // DogClass only available inside class body
};

Constructor#

class User {
  // Constructor runs when using 'new'
  constructor(name, email) {
    // Initialize instance properties
    this.name = name;
    this.email = email;
    this.createdAt = new Date();

    // Validation
    if (!email.includes('@')) {
      throw new Error('Invalid email');
    }
  }
}

const user = new User('John', 'john@example.com');

// Without new throws error
// User('John', 'john@example.com');  // TypeError

// Constructor can return object (rare)
class Override {
  constructor() {
    return { custom: true };
  }
}

new Override();  // { custom: true }

Instance Methods#

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(n) {
    this.value += n;
    return this;  // Enable chaining
  }

  subtract(n) {
    this.value -= n;
    return this;
  }

  multiply(n) {
    this.value *= n;
    return this;
  }

  getResult() {
    return this.value;
  }
}

const calc = new Calculator(10)
  .add(5)
  .multiply(2)
  .subtract(3)
  .getResult();  // 27

Static Methods and Properties#

class MathUtils {
  // Static property
  static PI = 3.14159;

  // Static method
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }

  // Factory method pattern
  static createRandom() {
    return Math.random();
  }
}

// Called on class, not instance
MathUtils.add(2, 3);  // 5
MathUtils.PI;  // 3.14159

// Not available on instances
const math = new MathUtils();
// math.add(2, 3);  // Error: add is not a function

// Factory pattern
class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

  static createAdmin(name) {
    return new User(name, 'admin');
  }

  static createGuest() {
    return new User('Guest', 'guest');
  }
}

const admin = User.createAdmin('John');
const guest = User.createGuest();

Getters and Setters#

class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  // Getter
  get radius() {
    return this._radius;
  }

  // Setter with validation
  set radius(value) {
    if (value <= 0) {
      throw new Error('Radius must be positive');
    }
    this._radius = value;
  }

  // Computed property getter
  get area() {
    return Math.PI * this._radius ** 2;
  }

  get circumference() {
    return 2 * Math.PI * this._radius;
  }
}

const circle = new Circle(5);
circle.radius;        // 5
circle.area;          // 78.54...
circle.radius = 10;   // Uses setter
circle.area;          // 314.15...

// Read-only property
class ReadOnly {
  constructor(value) {
    this._value = value;
  }

  get value() {
    return this._value;
  }
  // No setter - effectively read-only
}

Private Fields#

class BankAccount {
  // Private fields (prefix with #)
  #balance = 0;
  #pin;

  constructor(initialBalance, pin) {
    this.#balance = initialBalance;
    this.#pin = pin;
  }

  // Public methods access private fields
  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  withdraw(amount, pin) {
    if (pin !== this.#pin) {
      throw new Error('Invalid PIN');
    }
    if (amount > this.#balance) {
      throw new Error('Insufficient funds');
    }
    this.#balance -= amount;
    return amount;
  }

  getBalance(pin) {
    if (pin !== this.#pin) {
      throw new Error('Invalid PIN');
    }
    return this.#balance;
  }

  // Private method
  #validateTransaction(amount) {
    return amount > 0 && amount <= this.#balance;
  }
}

const account = new BankAccount(1000, '1234');
account.deposit(500);
account.getBalance('1234');  // 1500

// Cannot access private fields
// account.#balance;  // SyntaxError
// account.#pin;      // SyntaxError

Inheritance#

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

  speak() {
    console.log(`${this.name} makes a sound`);
  }

  move() {
    console.log(`${this.name} moves`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // Must call super() before using 'this'
    super(name);
    this.breed = breed;
  }

  // Override parent method
  speak() {
    console.log(`${this.name} barks`);
  }

  // Call parent method
  move() {
    super.move();  // Call Animal.move()
    console.log(`${this.name} runs`);
  }

  // Additional method
  fetch() {
    console.log(`${this.name} fetches the ball`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak();  // "Rex barks"
dog.move();   // "Rex moves" then "Rex runs"
dog.fetch();  // "Rex fetches the ball"

// instanceof checks
dog instanceof Dog;     // true
dog instanceof Animal;  // true

Static Inheritance#

class Parent {
  static version = '1.0';

  static describe() {
    return 'Parent class';
  }
}

class Child extends Parent {
  static describe() {
    return `${super.describe()} - Child class`;
  }
}

Child.version;     // '1.0' (inherited)
Child.describe();  // 'Parent class - Child class'

Abstract-like Patterns#

// JavaScript doesn't have abstract classes, but we can simulate
class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('Shape cannot be instantiated directly');
    }
  }

  // "Abstract" method
  getArea() {
    throw new Error('getArea must be implemented');
  }

  // Concrete method
  describe() {
    return `Shape with area: ${this.getArea()}`;
  }
}

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

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

// new Shape();  // Error
const rect = new Rectangle(10, 5);
rect.getArea();    // 50
rect.describe();   // "Shape with area: 50"

Mixins#

// Mixin functions
const Serializable = (Base) => class extends Base {
  serialize() {
    return JSON.stringify(this);
  }

  static deserialize(json) {
    return Object.assign(new this(), JSON.parse(json));
  }
};

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

  touch() {
    this.updatedAt = new Date();
  }
};

// Apply mixins
class User extends Timestamped(Serializable(Object)) {
  constructor(name) {
    super();
    this.name = name;
  }
}

const user = new User('John');
user.serialize();  // JSON string
user.createdAt;    // Date
user.touch();      // Updates timestamp

Class Fields#

class Counter {
  // Public field with default
  count = 0;

  // Private field
  #maxCount = 100;

  // Arrow function as method (bound to instance)
  increment = () => {
    if (this.count < this.#maxCount) {
      this.count++;
    }
  };

  decrement = () => {
    if (this.count > 0) {
      this.count--;
    }
  };
}

const counter = new Counter();
counter.increment();

// Arrow methods maintain 'this' binding
const { increment } = counter;
increment();  // Still works!
counter.count;  // 2

Symbol Methods#

class Collection {
  constructor(items) {
    this.items = items;
  }

  // Make iterable
  [Symbol.iterator]() {
    let index = 0;
    const items = this.items;
    return {
      next() {
        if (index < items.length) {
          return { value: items[index++], done: false };
        }
        return { done: true };
      }
    };
  }

  // Custom string representation
  [Symbol.toStringTag] = 'Collection';

  // Custom primitive conversion
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.items.length;
    }
    if (hint === 'string') {
      return this.items.join(', ');
    }
    return this.items;
  }
}

const collection = new Collection([1, 2, 3]);

// Iteration
for (const item of collection) {
  console.log(item);  // 1, 2, 3
}

// Spread
[...collection];  // [1, 2, 3]

// String tag
Object.prototype.toString.call(collection);  // "[object Collection]"

Checking Class Types#

class Animal {}
class Dog extends Animal {}

const dog = new Dog();

// instanceof
dog instanceof Dog;     // true
dog instanceof Animal;  // true
dog instanceof Object;  // true

// constructor
dog.constructor === Dog;  // true

// isPrototypeOf
Animal.prototype.isPrototypeOf(dog);  // true

// Custom instanceof behavior
class Validator {
  static [Symbol.hasInstance](obj) {
    return obj && typeof obj.validate === 'function';
  }
}

const obj = { validate() {} };
obj instanceof Validator;  // true

Common Patterns#

// Singleton
class Database {
  static #instance;

  constructor() {
    if (Database.#instance) {
      return Database.#instance;
    }
    Database.#instance = this;
    this.connection = null;
  }

  connect() {
    // Connection logic
  }
}

const db1 = new Database();
const db2 = new Database();
db1 === db2;  // true

// Builder pattern
class QueryBuilder {
  #query = { select: '*', from: '', where: [] };

  select(fields) {
    this.#query.select = fields;
    return this;
  }

  from(table) {
    this.#query.from = table;
    return this;
  }

  where(condition) {
    this.#query.where.push(condition);
    return this;
  }

  build() {
    const { select, from, where } = this.#query;
    let sql = `SELECT ${select} FROM ${from}`;
    if (where.length) {
      sql += ` WHERE ${where.join(' AND ')}`;
    }
    return sql;
  }
}

const query = new QueryBuilder()
  .select('name, email')
  .from('users')
  .where('active = true')
  .where('age > 18')
  .build();

Best Practices#

Class Design:
✓ Use classes for objects with behavior
✓ Keep constructors simple
✓ Use private fields for encapsulation
✓ Prefer composition over inheritance

Methods:
✓ Use arrow properties for callbacks
✓ Return 'this' for chaining
✓ Use getters for computed properties
✓ Use setters for validation

Inheritance:
✓ Favor shallow hierarchies
✓ Always call super() first
✓ Use mixins for shared behavior
✓ Consider composition instead

Avoid:
✗ Deep inheritance chains
✗ Forgetting 'new' keyword
✗ Exposing internal state
✗ Over-engineering with patterns

JavaScript classes provide clean syntax for object-oriented programming. Use private fields for encapsulation, getters/setters for controlled access, and static methods for utility functions. Prefer composition and mixins over deep inheritance. Remember that classes are syntactic sugar over prototypes, but they offer better organization and readability.