Decorator Pattern

1. Introduction

The Decorator Pattern is a structural design pattern that allows you to add behavior or properties to individual objects dynamically, wrapping them in a helper class or function, without modifying the underlying class blueprints.

2. Why It Matters

Using inheritance to add features to objects can result in a massive number of subclasses (e.g. creating subclasses like MilkCoffee, SugarCoffee, and MilkSugarCoffee). The Decorator pattern avoids this class explosion by allowing you to stack features dynamically at runtime.

3. Real-World Analogy

Think of Dressing up in Winter Clothes:

• Class Inheritance (Genetic modifications): Designing a custom human subclass for every winter setting: a "HeavyCoatedHuman", a "ScarvedHuman", or a "HeavyCoatedScarvedHuman". It is rigid and cannot be changed on the fly.
• Decorator Pattern (Stackable clothes): You have a base "Human" object. When it gets cold, you wrap the human in a "CoatDecorator". If it starts snowing, you wrap the coat in a "ScarfDecorator". You add layers (behaviors) dynamically at runtime, leaving the base human unmodified.

4. Implementing the Decorator

In classic Object-Oriented JavaScript, you implement a Decorator by creating a wrapper class that maintains a reference to the target object, forwarding operations to it while adding custom logic:

5. Functional Decorators

In JavaScript, you can write functional decorators that wrap functions directly, which is a common pattern in web development:

6. Practical Example

This script demonstrates wrapping a standard network service call in a caching decorator to store and reuse query responses:

7. Common Mistakes

• Losing the object prototype chain when wrapping: When wrapping an object, the decorator instance is not an instance of the base class. Sibling checks like instanceof BaseClass will return false. Ensure you design decorators to handle type validation checks or implement shared interfaces.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

class TextFormatter {
  render(txt) { return txt; }
}
class BoldDecorator {
  constructor(formatter) {
    this.formatter = formatter;
  }
// Bug: forgot to mirror the argument list in the decorator method!
  render() { 
    return `<b>${this.formatter.render()}</b>`; // crashes with undefined! Why?
  }
}
const b = new BoldDecorator(new TextFormatter());
b.render('hello');

class BoldDecorator {
  constructor(formatter) {
    this.formatter = formatter;
  }

render(...args) { // Accept arguments
    return `<b>${this.formatter.render(...args)}</b>`; // Pass through
  }
}

11. Interview Questions

12. Production Considerations

• • Interface Matching: When implementing decorators, ensure the decorator class mirrors the base class interface exactly (all methods and properties) to prevent errors when swapping objects.