Decorators e inyección de dependencias en JavaScript

The use of patterns such as decorators and dependency injection is now essential in modern JavaScript development, especially in frameworks such as Fastify and Next.js. Understanding how to implement these patterns allows you to create more orderly and flexible applications, extending functionalities in a dynamic and modular way.

What are decorators in JavaScript?

The decorator pattern is a technique used to add additional functionality to existing objects. In Node.js, and particularly with Fastify, this pattern allows to dynamically extend objects, for example, the request or response object.

The main advantage of this pattern is that you can add custom functions to the object at any part of the lifecycle of a request, achieving greater modularity and dynamism in the development of your applications.

What is dependency injection and how does it work?

Dependency injection is another key pattern in modern development, especially popularized by frameworks such as Next.js. The idea behind this pattern is to decouple components and functionality within an application, allowing you to handle external dependencies in an efficient and scalable way.

In Next.js, this pattern is clearly exemplified in security providers, where various implementations are injected into the application according to specific needs. This method encourages separation of responsibilities and facilitates code change management.

How do you combine decorators with dependency injection?

Combining these two patterns can significantly increase the orchestration and scalability of your application. A practical example of how to implement and combine both patterns in JavaScript is the following:

Creating the base class

First, we define a base class called DataService that will perform a basic operation with data:

class DataService  {  processData(data)  {    return data.map(item  => item  *  2);   }}

Decorator implementation

Next, we create a decorator to automatically add logging. The decorator, in this example DataServiceWithLogging, adds functionality without modifying the original behavior:

class DataServiceWithLogging  {  constructor(dataService, logger)  {    this.dataService  = dataService;    this.logger  = logger;   }  processData(data)  {    this.logger.log('starting processing');    const result  = this.dataService.processData(data);    this.logger.log('ending processing');    return result;   }}

Logger definition and injection

Then we define a simple logger object that will implement the dependency to be injected, in this case a logger that prints messages on console:

class Logger  {  log(message)  {    console.log('logger:', message);   } }}

Using the decorator with dependency injection

Finally, we use our decorator service and inject the logger using the created instances:

const baseService  = new DataService();const logger  = new Logger();const decoratedService  = new DataServiceWithLogging(baseService, logger);const inputData  = [1,  2,  3,  4];const processedData  = decoratedService.processData(inputData);console.log('processed result:', processedData);

This example clearly shows the synergy of both patterns, generating organized, maintainable and extensible code. Decorators increase functionality without altering the original essence, while dependency injection ensures easier and more effective management of components and functions within the project.

Did you find this practical example of decorators and dependency injection useful? Share your comments and experiences!