Composite

Composite is a structural design pattern that lets you compose objects into tree structures and then work with these structures as if they were individual objects.

The Composite design pattern is a structural 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 JavaScript, this pattern is quite useful for working with hierarchical data structures like trees.

Here's an example of how you might implement the Composite pattern in JavaScript:

// Component interface
class Component {
  constructor(name) {
    this.name = name;
  }

  // Common method to print component's name
  print() {
    console.log(this.name);
  }

  // Common method to add a child component
  add(component) {
    throw new Error('Not implemented');
  }

  // Common method to remove a child component
  remove(component) {
    throw new Error('Not implemented');
  }
}

// Composite
class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

  // Override add method to add a child component
  add(component) {
    this.children.push(component);
  }

  // Override remove method to remove a child component
  remove(component) {
    const index = this.children.indexOf(component);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }

  // Override print method to print children as well
  print() {
    console.log(`Composite: ${this.name}`);
    this.children.forEach((child) => {
      child.print();
    });
  }
}

// Leaf
class Leaf extends Component {
  constructor(name) {
    super(name);
  }

  // Leaf does not have add and remove methods
}

// Usage
const tree = new Composite('Tree');
const branch1 = new Composite('Branch 1');
const branch2 = new Composite('Branch 2');
const leaf1 = new Leaf('Leaf 1');
const leaf2 = new Leaf('Leaf 2');

branch1.add(leaf1);
branch2.add(leaf2);

tree.add(branch1);
tree.add(branch2);

tree.print();

In this example:

• Component is the base class for both leaf and composite objects.

• It defines the common interface for all components in the tree.

• Composite represents a branch node in the tree.

• It can have child components, which can be either leaf nodes or other composite nodes.

• Leaf represents a leaf node in the tree. It is the basic building block of the tree structure and does not have any child components.

• We create a tree structure consisting of a composite (tree) with two branches (branch1 and branch2), each having a leaf (leaf1 and leaf2).

• We then print the tree structure.

This pattern allows you to treat individual objects and compositions of objects uniformly, which can be very useful when dealing with complex tree-like structures.