Category: IT Essentials

The Decorator Pattern is a structural design pattern that allows behavior to be added to individual objects, either statically or dynamically, without affecting the behavior of other objects from the same class. This pattern is useful for adhering to the Open/Closed Principle, one of the SOLID principles of object-oriented design, which states that software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.

In JavaScript, the Decorator Pattern can be implemented in a variety of ways, including using higher-order functions, prototypes, or simply extending classes. Here, I’ll demonstrate a simple example using higher-order functions, which is a common approach in JavaScript due to its flexibility and the language’s nature of treating functions as first-class citizens.

Example: Logging Function Decorator

Suppose you have a set of functions performing various calculations or operations, and you want to add logging behavior to these functions to log their arguments and the result of the call without modifying the original functions directly.

Step 1: Define a Base Function

First, define a base function that you will decorate. For this example, we’ll use a simple function that adds two numbers:

function add(a, b) {
   return a + b;
}

Step 2: Create the Decorator

Next, create a decorator function that takes a function as an argument and returns a new function. This new function wraps the original function, adding logging before and after its execution:

function loggingDecorator(func) {
   return function(…args) {
     console.log(Entering ${func.name} with arguments: ${args.join(', ')});
     const result = func.apply(this, args);
     console.log(Exiting ${func.name} with result: ${result});
     return result;
   };
 }

Step 3: Use the Decorator

Now, you can apply the decorator to any function you like. Here’s how to apply it to the add function:

const addWithLogging = loggingDecorator(add);
 // Use the decorated function
 console.log(addWithLogging(3, 5));
 // Expected console output:
 // Entering add with arguments: 3, 5
 // Exiting add with result: 8
 // 8

In this example, loggingDecorator is a higher-order function that takes another function (func) as an argument and returns a new function. This new function logs a message before and after calling the original function, displaying the function name, its arguments, and its result.

The decorated function, addWithLogging, behaves exactly like the original add function but with added logging behavior. This demonstrates the Decorator Pattern’s ability to extend the functionality of objects (in this case, functions) dynamically without modifying their implementation.