Mastering Class Composition in JavaScript: A Practical Guide

Enhance Your Code with Reusability and Maintainability

Photo by Milad Fakurian on Unsplash

JavaScript’s class syntax, introduced in ES6 (ECMAScript 2015), brought a more familiar and structured approach to object-oriented programming. While classes offer a great way to encapsulate data and behavior, there are times when you might want to build more complex objects by combining simpler ones. This is where class composition comes into play.

Class composition is a technique that allows you to create new classes by combining existing ones. It promotes code reuse, modularity, and maintainability, making your codebase more flexible and easier to reason about.

Let’s dive into an example to illustrate the concept:

// Base class
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getDetails() {
    return `${this.make} ${this.model}`;
  }
}

// Composed class
class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }

  getDetails() {
    return `${super.getDetails()} (${this.doors} doors)`;
  }
}

// Usage
const myCar = new Car('Toyota', 'Camry', 4);
console.log(myCar.getDetails()); // Output: Toyota Camry (4 doors)