Composition in JavaScript

Composition in JavaScript is an object-oriented programming concept in which one object is built using other objects as its parts. It represents a strong “has-a” relationship, where the contained objects are closely tied to the lifecycle of the parent object.

• It combines smaller objects to create a larger and more complex object.
• The contained objects are typically created and managed by the parent object.
• It promotes modular design by separating different responsibilities into reusable components.

Approach 1: Composition Using Classes

In this approach, a parent class creates and manages the objects that form its internal components. These component objects are closely associated with the parent object.

• Create classes representing the individual components.
• Create a parent class that initializes these components.
• Access component functionality through the parent object.
• The parent object manages the components as part of its structure.

Example: Demonstrates composition by creating an engine as a component of a car.

class Engine {
    start() {
        console.log("Engine started.");
    }

    stop() {
        console.log("Engine stopped.");
    }
}

class Car {
    constructor(brand) {
        this.brand = brand;

        // Engine is created as part of the Car
        this.engine = new Engine();
    }

    startCar() {
        console.log(`${this.brand} car is starting.`);
        this.engine.start();
    }

    stopCar() {
        this.engine.stop();
        console.log(`${this.brand} car has stopped.`);
    }
}

const car = new Car("Toyota");

car.startCar();
car.stopCar();

Toyota car is starting.
Engine started.
Engine stopped.
Toyota car has stopped.

Here, the Car object creates and manages its Engine object internally. The engine acts as a component of the car, demonstrating a strong composition relationship.

Approach 2: Composition Using Nested Objects

In this approach, an object contains other objects directly as part of its structure. Each nested object represents a component responsible for a specific part of the parent object's functionality.

• Create objects representing individual components.
• Define these components inside the parent object's structure.
• Use the parent object to access and manage its components.
• Keep related functionality grouped within a single larger object.

Example: Demonstrates composition by organizing rooms inside a house object.

const house = {
    address: "Noida, India",

    livingRoom: {
        furniture: ["Sofa", "Table"],

        displayFurniture() {
            console.log(
                `Living Room: ${this.furniture.join(", ")}`
            );
        }
    },

    kitchen: {
        appliances: ["Refrigerator", "Microwave"],

        displayAppliances() {
            console.log(
                `Kitchen: ${this.appliances.join(", ")}`
            );
        }
    },

    displayDetails() {
        console.log(`House Location: ${this.address}`);

        this.livingRoom.displayFurniture();
        this.kitchen.displayAppliances();
    }
};

house.displayDetails();

House Location: Noida, India
Living Room: Sofa, Table
Kitchen: Refrigerator, Microwave

In this example, the livingRoom and kitchen objects are created as parts of the house object. They represent components that together form the larger House structure, demonstrating composition through nested objects.