Composite pattern

Overview

The Composite pattern composes objects into tree structures and lets clients treat individual objects (leaves) and groups (composites) uniformly through the same interface. A folder and a file both have size(); a folder's size is the sum of its children's sizes, recursively.

Composite is the natural model for any part-whole hierarchy: file systems, UI component trees, organization charts, menus, product bundles, and expression trees. Client code does not need to distinguish leaves from composites, so recursive operations become simple.

When to use it

• Part-whole hierarchies (trees).
• Clients should treat single items and groups the same way.
• Recursive operations: total price, render, count, search.

Where it shows up in interviews

Where it is used in real software

Key terms

Component

Common interface for leaves and composites.

Leaf

Has no children (File).

Composite

Holds children and delegates to them (Folder).

Recursive composition

Composites can contain composites.

How it works, step by step

1. 1
   Define the component interface

   size(), render(), price().

2. 2
   Implement leaves

   Return their own value.

3. 3
   Implement composites

   Hold children, aggregate their results.

4. 4
   Add child management

   add/remove on composites.

5. 5
   Guard against cycles

   A folder cannot contain itself.

Folder size calculation

root/ { a.txt 10KB, photos/ { p1.jpg 200KB, p2.jpg 300KB }, docs/ { cv.pdf 50KB } }

The client calls root.size() once; recursion handles any depth.

Implementation

1interface FsNode {2  name: string;3  size(): number;4  print(indent?: string): string[];5}6 7class FileNode implements FsNode {8  constructor(readonly name: string, private bytes: number) {}9  size() { return this.bytes; }10  print(indent = "") { return [`${indent}${this.name} (${this.bytes})`]; }11}12 13class Folder implements FsNode {14  private children: FsNode[] = [];15  constructor(readonly name: string) {}16  add(node: FsNode) {17    if (node === this) throw new Error("A folder cannot contain itself");18    this.children.push(node);19    return this;20  }21  size() { return this.children.reduce((s, c) => s + c.size(), 0); }22  print(indent = ""): string[] {23    return [`${indent}${this.name}/ (${this.size()})`, ...this.children.flatMap((c) => c.print(indent + "  "))];24  }25}26 27const root = new Folder("root")28  .add(new FileNode("a.txt", 10))29  .add(new Folder("photos").add(new FileNode("p1.jpg", 200)).add(new FileNode("p2.jpg", 300)));30root.size(); // 510

Complexity and performance

Trade-offs

Variants and related techniques

Common mistakes

• Cycles in the tree.

  Fix: Validate on add or track parents.

• Clients checking instanceof Folder everywhere.

  Fix: Move behavior into the component interface.

Interview questions

Practice problems