Skip to main content

Composite Design Pattern

Structural: Composite Pattern


Could you please explain the composite design pattern?

View Answer:
Interview Response: The Composite Pattern, structurally, allows you to compose objects into a tree-like structure, allowing us to work with them as individual objects. Partitioning is another term for this. The Composite pattern enables the creation of objects with primitive items or a collection of object properties. Each item in the group can hold other collections, allowing for deeply nested structures.

Diagram:


Code Example:

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

//Leaf subclass
class Developers extends Employee {
constructor(name, position, progress) {
super(name, position, progress);
}
getProgress() {
return this.progress;
}
}

//Leaf subclass
class FreeLanceDev extends Employee {
constructor(name, position, progress) {
super(name, position, progress);
}
getProgress() {
return this.progress();
}
}

//Composite subclass
class DevTeamLead extends Employee {
constructor(name, position) {
super(name, position);
this.teamMembers = [];
}
addMember(employee) {
this.teamMembers.push(employee);
}

removeMember(employee) {
for (var i = 0; i < this.teamMembers.length; i++) {
if (this.teamMembers[i] == employee) {
this.teamMembers.splice(i, 1);
}
}
return this.teamMembers;
}

getProgress() {
for (var i = 0; i < this.teamMembers.length; i++) {
console.log(this.teamMembers[i].getProgress());
}
}

showTeam() {
for (var i = 0; i < this.teamMembers.length; i++) {
console.log(this.teamMembers[i].name);
}
}
}

function run() {
const seniorDev = new Developers('Rachel', 'Senior Developer', '60%');
const juniorDev = new Developers('Joey', 'Junior Developer', '50%');
const teamLead = new DevTeamLead('Regina', 'Dev Team Lead', '90%');
teamLead.addMember(seniorDev);
teamLead.addMember(juniorDev);
console.log('Team members list:');
teamLead.showTeam();
console.log('Get Team members progress:');
teamLead.getProgress();
console.log('Removing Rachel from team:');
teamLead.removeMember(seniorDev);
console.log('Updated team members list:');
teamLead.showTeam();
const freelanceDev = new Developers('Ross', 'Free Lancer', '80%');
console.log("Get freelance developer's progress:");
console.log(freelanceDev.getProgress());
}

run();

/*
output:

Team members list:
Rachel
Joey
Get Team members progress:
60%
50%
Removing Rachel from team:
Updated team members list:
Joey
Get freelance developer's progress:
80%

*/

The Composite pattern belongs to which design pattern family?

View Answer:
Interview Response: The Composite pattern is a type of Structural design pattern.

Can you specify a use case for the Composite Pattern?

View Answer:
Interview Response: Composite pattern is powerful as it allows us to treat an object as a composite. Since both single and composite objects share the same interface, it enables reusing objects without worrying about their compatibility.

Technical Response: The Composite Pattern describes a collection of objects treated in the same way that a single instance of an object can.

This approach allows us to treat individual objects and compositions uniformly, which means the same behavior is applied when working with one or a thousand items.

We use this pattern to create a scalable application with many objects, and it is useful when dealing with an object hierarchy that resembles a tree. Your operating system, for example, uses this pattern to create directories and sub-directories. Some libraries also use composite patterns such as React and Vue to create reusable interfaces.

What objects participate in the Composite Pattern?

View Answer:
Interview Response: The participating objects in the Composite Pattern include the Component, Leaf, and Composite objects.

  • Component – The component declares the interface for the objects in the composition.
  • Leaf – The leaf represents leaf objects in the composition, and a leaf gets defined as an object with no children in this pattern.
  • Composite – The Composite object represents branches of subtrees in the composition and maintains a collection of child components.


What are some of the advantages of employing the composite pattern?

View Answer:
Interview Response: Benefits of the Composite Pattern

  • Using polymorphism and recursion, you can more efficiently work with complex tree structures.
  • The Open/Closed Principle You can add new element types to the app without breaking the existing code, which is now compatible with the object tree.


What are some of the disadvantages of employing the composite pattern?

View Answer:
Interview Response: Drawbacks of the Composite Pattern

  • It might be challenging to provide a standard interface for classes whose functionality differs too much. You would need to overgeneralize the component interface in specific scenarios, making it harder to comprehend.