Skip to main content

Composite Pattern in JavaScript (Live Playground)

The Composite pattern is a structural design pattern that allows you to compose objects into tree structures to represent part-whole hierarchies. It lets clients treat individual objects and compositions of objects uniformly. In this tutorial, we'll explore the Composite pattern in JavaScript, including its use cases, implementation, and benefits.

Why Use the Composite Pattern?​

The Composite pattern is useful when you want to:

  1. Represent part-whole hierarchies in your code.
  2. Create flexible and maintainable code that can handle both individual objects and groups of objects.
  3. Simplify client code by treating individual objects and compositions of objects uniformly.

Implementing the Composite Pattern in JavaScript​

Here's an example of how to implement the Composite pattern using JavaScript classes:

TypeScript
// Component
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  displayInfo() {
    console.log(`${this.name} - ${this.position}`);
  }

  add(employee) {}
  remove(employee) {}
  getChild(index) {}
}

// Composite
class Manager extends Employee {
  constructor(name, position) {
    super(name, position);
    this.subordinates = [];
  }

  add(employee) {
    this.subordinates.push(employee);
  }

  remove(employee) {
    const index = this.subordinates.indexOf(employee);
    if (index !== -1) {
      this.subordinates.splice(index, 1);
    }
  }

  getChild(index) {
    return this.subordinates[index];
  }

  displayInfo() {
    super.displayInfo();
    this.subordinates.forEach(employee => employee.displayInfo());
  }
}

const manager = new Manager('Alice', 'CEO');
const employee1 = new Employee('Bob', 'Developer');
const employee2 = new Employee('Carol', 'Designer');

manager.add(employee1);
manager.add(employee2);
manager.displayInfo();

In this example, the Employee class represents the component, and the Manager class represents the composite. The Manager class extends the Employee class and adds methods to manage subordinates, which can be individual employees or other managers. The client code creates a manager and adds two employees to the manager's list of subordinates.

Live Playground, Try it Yourself

Benefits of the Composite Pattern​

Implementing the Composite pattern in your JavaScript projects offers several benefits:

  1. Flexibility: The Composite pattern allows you to create flexible and maintainable code that can handle both individual objects and groups of objects.
  2. Hierarchical Representation: The Composite pattern enables you to represent part-whole hierarchies in your code, making it easier to model complex relationships between objects.
  3. Simplicity: The Composite pattern simplifies client code by treating individual objects and compositions of objects uniformly, making it easier to write and understand.

Conclusion​

In summary, the Composite pattern is a valuable tool in JavaScript development that can help you create flexible, hierarchical code structures. By understanding and implementing this pattern, you can enhance your web development skills and create more robust applications.