DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

1

JavaScript Design Patterns - Structural - Composite

Image description

The Composite pattern allows the creation of objects with properties that are primitive items or a collection of objects. Each item in the collection can hold other collections themselves, creating deeply nested structures.

In the below example, we are creating a computing equipment subsystem that is stored in a Cabinet. Each element can be a different instance.

// Equipment
class Equipment {
  getPrice() {
    return this.price || 0;
  }

  getName() {
    return this.name;
  }

  setName(name) {
    this.name = name;
  }
}

class Pattern extends Equipment {
  constructor() {
    super();
    this.equipments = [];
  }

  add(equipment) {
    this.equipments.push(equipment);
  }

  getPrice() {
    return this.equipments
      .map(equipment => {
        return equipment.getPrice();
      })
      .reduce((a, b) => {
        return a + b;
      });
  }
}

class Cabbinet extends Pattern {
  constructor() {
    super();
    this.setName('cabbinet');
  }
}

// --- leafs ---
class FloppyDisk extends Equipment {
  constructor() {
    super();
    this.setName('Floppy Disk');
    this.price = 70;
  }
}

class HardDrive extends Equipment {
  constructor() {
    super();
    this.setName('Hard Drive');
    this.price = 250;
  }
}

class Memory extends Equipment {
  constructor() {
    super();
    this.setName('Memory');
    this.price = 280;
  }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Use this pattern when we want to represent hierarchies of objects.

๐Ÿš€ A complete example here: https://stackblitz.com/edit/vitejs-vite-8eqxdx?file=main.js


I hope you found it useful. Thanks for reading. ๐Ÿ™

Let's get connected! You can find me on:

ACI image

ACI.dev: Best Open-Source Composio Alternative (AI Agent Tooling)

100% open-source tool-use platform (backend, dev portal, integration library, SDK/MCP) that connects your AI agents to 600+ tools with multi-tenant auth, granular permissions, and access through direct function calling or a unified MCP server.

Star our GitHub!

Top comments (0)

Tiger Data image

๐Ÿฏ ๐Ÿš€ Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

Weโ€™ve quietly evolved from a time-series database into the modern PostgreSQL for todayโ€™s and tomorrowโ€™s computing, built for performance, scale, and the agentic future.

So weโ€™re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who weโ€™ve become. TigerData is bold, fast, and built to power the next era of software.

Read more

๐Ÿ‘‹ Kindness is contagious

Delve into this thought-provoking piece, celebrated by the DEV Community. Coders from every walk are invited to share their insights and strengthen our collective intelligence.

A heartfelt โ€œthank youโ€ can transform someoneโ€™s dayโ€”leave yours in the comments!

On DEV, knowledge sharing paves our journey and forges strong connections. Found this helpful? A simple thanks to the author means so much.

Get Started