In this article, we’ll dive into Decorators in JavaScript: what they are, how they work, what they’re useful for, and how to use them. We’ll cover decorator composition, parameter decorators, asynchronous decorators, creating custom decorators, using decorators in various frameworks, decorator factories, and the pros and cons of JavaScript decorators.A decorator is a function that adds some superpower to an existing method. It allows for the modification of an object’s behavior — without changing its original code, but extending its functionality.Decorators are great for enhancing code readability, maintainability, and reusability. In JavaScript, decorators are functions that can modify classes, methods, properties, or even parameters. They provide a way to add behavior or metadata to various parts of your code without altering the source code.Decorators are typically used with classes and prefixed with the @ symbol:The code above demonstrates how a decorator may modify the behavior of a class method by logging a message before the method’s execution.Decorators have the powerful features of being composed and nested. It means we can apply multiple decorators to the same piece of code, and they’ll execute in a specific order. It helps in building complex and modular applications.Let’s explore a use case where multiple decorators apply to the same code. Consider a web application where we want to restrict access to certain routes based on user authentication and authorization levels. We can achieve this by composing decorators like this:Here, requireAuth and requireAdmin are decorators that ensure the user is authenticated and has admin privileges before accessing the AdminDashboard.Parameter decorators allow us to modify method parameters. They are less common than other decorator types, but they can be valuable in certain situations, such as validating or transforming function arguments.Here’s an example of a parameter decorator that ensures a function parameter is within a specified range:The code defines a decorator named validateParam applied to a method called multiply in the MathOperations class. The validateParam decorator checks if the parameters of the multiply method fall within the specified range (0 to 10). When the multiply method calls with the arguments 5 and 12, the decorator detects that 12 is out of range and throws an error.Asynchronous decorators handle asynchronous operations in modern JavaScript applications. They’re helpful when dealing with async/await and promises.Consider a scenario where we want to limit the call rate of a particular method. We can create @throttle decorator:Here, the defined decorator throttle applies to the fetchData method in the DataService class. The throttle decorator ensures the fetchData method only executes once per second. If it’s called more frequently, the decorator logs a message indicating that the method has throttled.This code demonstrates how decorators can control the rate at which a method invokes, which can be helpful in scenarios like rate-limiting API requests.While JavaScript provides some built-in decorators like @deprecated or @readonly, there are cases where we need to create custom decorators tailored to our specific project requirements.Custom decorators are user-defined functions that modify the behavior or properties of classes, methods, properties, or parameters in JavaScript code. These decorators encapsulate and reuse specific functionality or enforce certain conventions consistently across our codebase.Decorators come with the @ symbol. Let’s create a custom decorator that logs a message before and after the execution of a method. This decorator will help illustrate the basic structure of custom decorators:In this example, we’ve defined the logMethod decorator, which wraps the greet method of the Example class. The decorator logs a message before and after the method’s execution, enhancing the behavior of the greet method without modifying its source code.Let’s take another example — custom @measureTime decorator that logs the execution time of a method:The code above defines a custom decorator named measureTime and applies it to a method within the Timer class. This decorator measures the execution time of the decorated method. When we call the heavyComputation method, the decorator records the start time, runs the computation, records the end time, calculates the elapsed time, and logs it to the console.This code demonstrates how decorators add performance monitoring and timing functionality to methods, which can be valuable for optimizing code and identifying bottlenecks.Custom decorators may provide various functionalities such as validation, authentication, logging, or performance measurement. Here are some use cases:JavaScript frameworks and libraries like Angular, React, and Vue.js have their conventions for using decorators. Understanding how decorators work in these frameworks helps us build better applications.Angular, a comprehensive frontend framework, relies heavily on decorators to define various areas of components, services, and more. Here are some decorators in Angular:@Component. Used to define a component, specifying metadata like the component’s selector, template, and styles:@Injectable. Marks a class as a service that maybe injected into other components and services:@Input and @Output. These decorators allow us to define input and output properties for components, facilitating communication between parent and child components:Angular’s decorators enhance code organization, making it easier to build complex applications with a clear and structured architecture.React is a popular JavaScript library. It doesn’t have native decorators in the same way Angular does. However, React introduced a concept known as higher-order components (HOCs), which act as a form of decorator. HOCs are functions that take a component and return a new enhanced component. They work for code reuse, state abstraction, and props manipulation.Here’s an example of a HOC that logs when a component renders:In this example, withLogger is a higher-order component that logs the rendering of any component it wraps. It’s a way of enhancing components with additional behavior without altering their source code.Vue.js is another popular JavaScript framework for building user interfaces. While Vue.js doesn’t natively support decorators, some projects and libraries allow us to use decorators to define component options.Here’s an example of defining a Vue component using the vue-class-component library with decorators:In this example, the @Component decorator is used to define a Vue component, and the @Prop decorator is used to make the prop on the component.Decorator factories are functions that return decorator functions. Instead of defining a decorator directly, we create a function that generates decorators based on the arguments we pass. This makes it possible to customize the behavior of decorators, making them highly versatile and reusable.The general structure of a decorator factory looks like this:Here, decoratorFactory is the decorator factory function that accepts a config argument. It returns a decorator function, which can modify the target, key, or descriptor based on the provided configuration.Let’s try another example — a decorator factory that logs messages with different severity levels:In the code above, custom decorators are being used to enhance methods within the Logger class. These decorators are by a decorator factory called logWithSeverity. When applied to methods, they log messages with specific severity levels before executing the original method. In this case, the info and error methods of the Logger class decorate to log messages with severity levels INFO and ERROR respectively. When we call these methods, the decorator logs messages indicating the method call and their severity levels.This code demonstrates how decorator factories can create customizable decorators to add behavior to methods, such as logging, without altering the source code.Decorator factories are particularly useful for creating decorators with different settings, conditions, or behaviors. Here are some practical use cases for decorator factories:Validation decorators. We can create a validation decorator factory to generate decorators that validate specific conditions for method parameters. For example, a @validateParam decorator factory can enforce different rules for different parameters, like minimum and maximum values:Logging decorators. Decorator factories can generate logging decorators with different log levels or destinations. For instance, we can create a @logWithSeverity decorator factory that logs messages with varying severity levels:Conditional decorators. Decorator factories allow us to create conditional decorators that apply the decorated behavior only in certain circumstances. For example, we could create an @conditionallyExecute decorator factory that checks a condition before executing the method:Some of the benefits of decorator factories include:JavaScript decorators, while powerful, come with their own set of optimization pros and cons that developers should be aware of. This article has provided an in-depth exploration of decorators in JavaScript. Decorators are functions that enhance the behavior of existing methods, classes, properties, or parameters in a clean/modular way. They’re used to add functionality or metadata to code without altering its source.With the insights provided here, use decorators judiciously in JavaScript development.You can learn more about the ongoing development of decorators in JavaScript by reading the TC39 Decorators Proposal on GitHub.Blessing is a proficient technical writer with 3+ years of expertise in software documentation and user guides, actively mentoring aspiring writers and contributing to open-source projects to foster growth and understanding in the tech sector.© 2000 – 2023 SitePoint Pty. Ltd.This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.