Introduction to the Composite Pattern Using JavaScript

Introduction to the Composite Pattern Using JavaScript | CodeSignal Learn

Introduction to the Composite Pattern

Welcome back! You have learned about the Adapter Pattern and how it helps make incompatible interfaces work together seamlessly. Now, let's dive into another crucial structural pattern that focuses on composition: the Composite Pattern . The Composite Pattern allows you to build complex structures by combining objects into tree-like structures to represent part-whole hierarchies. This pattern is particularly useful when dealing with applications like file systems, GUI frameworks, or organizational structures where you need to treat individual objects and compositions of objects uniformly.

Understanding the Composite Pattern

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Initial Setup

To start with the Composite Pattern in JavaScript, you'll simulate abstract classes by using a base class with an unimplemented method that throws an error if it's not overridden in child classes: JavaScript class Employee {showDetails() {throw new Error('You have to implement the method showDetails!');}} class Employee {showDetails() {throw new Error('You have to implement the method showDetails!');}} The Employee class serves as a conceptual interface where showDetails acts as a placeholder method for child classes to override.

Creating Individual Employees

Next, let's create a class for individual employees such as a developer. The Developer class will inherit from Employee and implement the showDetails method: JavaScript class Developer extends Employee {constructor(name, position) {super(); this.name = name; this.position = position;} showDetails() {console.log(`${this.name} works as ${this.position}.`);}} In this step, the Developer class takes a name and a position to describe the developer's details, and these details are printed whenever showDetails is called.

Creating Manager to Manage Employees

To manage groups of employees, we create a Manager class. This class will also inherit from Employee but will use an array to manage multiple employees: JavaScript class Manager extends Employee {constructor() {super(); this.employees = [];} add(employee) {this.employees.push(employee);} remove(employee) {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}}} class Manager extends Employee {constructor() {super(); this.employees = [];} add(employee) {this.employees.push(employee);} remove(employee) {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}}} Here, the Manager class has methods to add and remove employees from its array. This allows the manager to manage a group of employees.

Implementing the Composite Structure

The Manager class will also implement the showDetails method to display details of all employees it manages: JavaScript class Manager extends Employee {constructor() {super(); this.employees = [];} add(employee) {this.employees.push(employee);} remove(employee) {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails() {this.employees.forEach(employee => {employee.showDetails();});}} class Manager extends Employee {constructor() {super(); this.employees = [];} add(employee) {this.employees.push(employee);} remove(employee) {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails() {this.employees.forEach(employee => {employee.showDetails();});}} This method iterates over all employees managed by the manager and calls their showDetails methods, ensuring that the details of every employee in the hierarchy are displayed.

Full Example

Here is the complete code illustrating the Composite Pattern in an organizational structure: JavaScript class Employee {showDetails() {throw new Error('You have to implement the method showDetails!');}} class Developer extends Employee {constructor(name, position) {super(); this.name = name; this.position = position;} showDetails() {console.log(`${this.name} works as ${this.position}.`);}} class Manager extends Employee {constructor() {super(); this.employees = [];} add(employee) {this.employees.push(employee);} remove(employee) {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails() {this.employees.forEach(employee => {employee.showDetails();});}} // Usage Example // Create developers const dev1 = new Developer('Alice', 'Frontend Developer'); const dev2 = new Developer('Bob', 'Backend Developer'); const dev3 = new Developer('Charlie', 'DevOps Engineer'); // Create managers and add developers to them const managerA = new Manager(); managerA.add(dev1); managerA.add(dev2); const managerB = new Manager(); managerB.add(dev3); // Create a director and add managers to them const director = new Manager(); director.add(managerA); director.add(managerB); // Call showDetails to display the entire organization's structure director.showDetails(); This example demonstrates creating a hierarchical structure with developers, managers, and a director. By calling showDetails on the director, all employee details within the hierarchy are displayed, showcasing the Composite Pattern in action.

Introduction to the Composite Pattern Using JavaScript

Introduction to the Composite Pattern

Understanding the Composite Pattern

Join the 1M+ learners on CodeSignal

Initial Setup

Creating Individual Employees

Creating Manager to Manage Employees

Implementing the Composite Structure

Full Example

Conclusion