Decorator

Decorator is a structural design pattern that lets you attach new behaviors to objects by placing these objects inside special wrapper objects that contain the behaviors.

In JavaScript, the Decorator design pattern allows you to add new functionality to an object dynamically without altering its structure.

This pattern is useful when you want to extend the behavior of individual objects without creating a new subclass for each new functionality.

// Base component
class Coffee {
  cost() {
    return 5;
  }
}

// Decorator 1
class WithMilk extends Coffee {
  constructor(coffee) {
    super();
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 2;
  }
}

// Decorator 2
class WithSugar extends Coffee {
  constructor(coffee) {
    super();
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 1;
  }
}

// Create a base coffee
let myCoffee = new Coffee();
console.log(myCoffee.cost()); // Output: 5

// Add milk to the coffee
myCoffee = new WithMilk(myCoffee);
console.log(myCoffee.cost()); // Output: 7

// Add sugar to the coffee
myCoffee = new WithSugar(myCoffee);
console.log(myCoffee.cost()); // Output: 8

In this example, Coffee is the base component, and WithMilk and WithSugar are decorators that add functionality to the base component.

Each decorator wraps around the base component and modifies its behavior by adding its own cost.