What is the Decorator pattern?

Question

Accepted Answer

The **Decorator** pattern dynamically adds **behavior or responsibilities** to objects by wrapping them — without modifying the original class. It provides a flexible alternative to subclassing for extending functionality, letting you compose behaviors.

## What the Decorator pattern does

```text
DECORATOR → WRAP an object to add behavior, keeping the same interface:
  → the decorator wraps the original, adds its behavior, and delegates to the original
  → you can STACK decorators (wrap a wrapped object) → compose multiple behaviors
  → adds functionality WITHOUT modifying the original class or using subclassing
→ "wrap to extend" — flexible, composable behavior addition
```

## Example

```js
// base object
let coffee = { cost: () => 5, description: () => 'coffee' };
// decorators wrap and add behavior
function withMilk(c) {
  return { cost: () => c.cost() + 1, description: () => c.description() + ' + milk' };
}
function withSugar(c) {
  return { cost: () => c.cost() + 0.5, description: () => c.description() + ' + sugar' };
}
coffee = withSugar(withMilk(coffee));   // stack decorators
coffee.cost();          // 6.5 — composed behavior
```

## Benefits and uses

```text
BENEFITS:
  ✓ Add behavior WITHOUT modifying the original (open/closed) or subclass explosion
  ✓ COMPOSE behaviors flexibly at runtime (stack different decorators in combinations)
  ✓ Single responsibility → each decorator adds one thing
USES → I/O streams (wrapping streams), middleware (wrap request handlers), UI components,
  adding features (logging, caching, validation) around a core object; HOC in React
```

## Why it matters

Understanding the Decorator pattern is valuable because it's a **useful structural pattern** for flexibly extending behavior, so it's practically-relevant design knowledge.

The Decorator pattern adds behavior to objects by **wrapping them** (keeping the same interface, delegating to the original while adding behavior), without modifying the original class — providing a flexible alternative to subclassing.

Understanding what it does (wrapping an object to add behavior, with the ability to **stack decorators** to compose multiple behaviors) is the core knowledge.

Understanding the **benefits** is key: it adds behavior **without modifying the original** (following the open/closed principle) and avoids the **subclass explosion** that would result from creating subclasses for every combination of features, it lets you **compose behaviors flexibly at runtime** (stacking different decorators in various combinations), and it supports single responsibility (each decorator adding one thing).

This composability — building up behavior by stacking small, focused decorators — is the pattern's key strength, far more flexible than rigid subclassing.

Understanding the **uses** — I/O streams (the classic example of wrapping streams), middleware (wrapping request handlers — common in web frameworks), UI components, adding cross-cutting features (logging, caching, validation) around a core object, and React's higher-order components — clarifies its broad real-world applicability.

The Decorator pattern appears throughout real frameworks and libraries.

Since the Decorator pattern is a useful structural pattern for flexibly extending behavior (wrapping to add behavior without modifying originals or subclass explosion, composing behaviors at runtime), and since understanding what it does, its benefits, and its common uses (streams, middleware, features) is practically relevant, understanding the Decorator pattern is valuable, commonly-applicable design knowledge — a useful pattern for flexible, composable behavior extension, appearing throughout real frameworks (streams, middleware, HOCs), and important design knowledge for extending functionality cleanly without modifying originals or creating rigid subclass hierarchies.