Learn Decorator Pattern | Structural Patterns

The Decorator pattern is a structural pattern that enables you to add new functionality to existing objects without altering their structure. In JavaScript, this is especially useful when you want to enhance or extend the behavior of functions or objects at runtime, rather than modifying their original implementation. This approach is valuable when you need flexible, reusable, and maintainable code, as it allows you to layer additional features dynamically and transparently.

A practical use of the Decorator pattern is in situations where you want to add cross-cutting concerns, such as logging, validation, or timing, to functions or objects. Rather than rewriting or subclassing the original code, you can "wrap" it with decorators that provide the extra behavior.


              1234567891011121314151617181920
            
// Original function
function greet(name) {
  return `Hello, ${name}!`;
}

// Decorator function to add logging
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args.join(", ")}`);
    const result = fn(...args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

// Create a decorated version of greet
const greetWithLogging = withLogging(greet);

// Use the decorated function
greetWithLogging("Alice");

By using the Decorator pattern, you can promote code reuse and flexibility. Rather than duplicating logic or changing the original implementation, you can create small, composable decorators that add specific features. These decorators can be applied to any compatible function or object, making your codebase easier to maintain and extend. This pattern is especially helpful in large applications, where requirements often change and new features need to be added without disrupting existing code.

1. The Decorator pattern allows you to:

2. Why is the Decorator pattern useful for code reuse?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to create multiple decorators and combine them?

What are some real-world scenarios where the Decorator pattern is especially useful in JavaScript?

Can you show how to use the Decorator pattern with classes instead of functions?

Awesome!

Completion rate improved to 7.14

Swipe to show menu


              1234567891011121314151617181920
            
// Original function
function greet(name) {
  return `Hello, ${name}!`;
}

// Decorator function to add logging
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args.join(", ")}`);
    const result = fn(...args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

// Create a decorated version of greet
const greetWithLogging = withLogging(greet);

// Use the decorated function
greetWithLogging("Alice");

1. The Decorator pattern allows you to:

2. Why is the Decorator pattern useful for code reuse?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1