Skip to main content

Decorator Pattern in JavaScript (Live Playground)

The Decorator pattern is a structural design pattern that allows you to attach new responsibilities or behaviors to objects dynamically without modifying their existing structure. It is an alternative to subclassing and promotes more flexibility and extensibility in your code. In this tutorial, we'll explore the Decorator pattern in JavaScript, including its use cases, implementation, and benefits.

Why Use the Decorator Pattern?​

The Decorator pattern is useful when you want to:

  1. Add new responsibilities or behaviors to objects dynamically without affecting other instances of the same class.
  2. Avoid subclassing when a large number of variations are needed.
  3. Keep your code more flexible, maintainable, and extensible.

Implementing the Decorator Pattern in JavaScript​

Here's an example of how to implement the Decorator pattern using JavaScript classes:

TypeScript
// Component
class Coffee {
  cost() {
    return 5;
  }
}

// Decorator
class CoffeeDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

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

// Concrete Decorators
class Milk extends CoffeeDecorator {
  cost() {
    return this.coffee.cost() + 1;
  }
}

class Sugar extends CoffeeDecorator {
  cost() {
    return this.coffee.cost() + 0.5;
  }
}

const plainCoffee = new Coffee();
console.log(plainCoffee.cost()); // Output: 5

const coffeeWithMilk = new Milk(plainCoffee);
console.log(coffeeWithMilk.cost()); // Output: 6

const coffeeWithMilkAndSugar = new Sugar(coffeeWithMilk);
console.log(coffeeWithMilkAndSugar.cost()); // Output: 6.5

In this example, the Coffee class represents the component, and the CoffeeDecorator class represents the decorator. The Milk and Sugar classes are concrete decorators that extend the CoffeeDecorator class and add new responsibilities to the Coffee instance.

Live Playground, Try it Yourself

Benefits of the Decorator Pattern​

Implementing the Decorator pattern in your JavaScript projects offers several benefits:

  1. Flexibility: The Decorator pattern allows you to add new responsibilities or behaviors to objects dynamically, making your code more flexible and extensible.
  2. Modularity: The Decorator pattern promotes modularity by separating concerns and allowing you to compose objects with different combinations of behaviors.
  3. Maintainability: The Decorator pattern keeps your code more maintainable by reducing the need for complex inheritance structures and promoting a more straightforward composition of objects.

Conclusion​

In summary, the Decorator pattern is a valuable tool in JavaScript development that can help you create flexible, modular, and maintainable code. By understanding and implementing this pattern, you can enhance your web development skills and create more robust applications.