Understanding and Using Decorators in JavaScript

Decorators in JavaScript are a design pattern that enhances an object's behaviour by wrapping it with additional functionality, without altering its original code. It enable modifications like logging or security checks without changing the underlying implementation. It adopted from languages like Python and C#, allows for flexible extension of object functionality in JavaScript applications.

👁 Image

Use Decorators

A decorator is a higher-order function that modifies the behaviour of a function, method, or class. Decorators are used for extending the functionality of a function, method, or class without modifying its code.

Syntax

// Define a decorator function that adds a static property to a class
let variable = function(object) {
 object.property = 'characteristic';
};

// Apply the decorator to the class
@variable
class GFG {}

// Access the added property
console.log(GFG.property);

Example: It is an example of decorators in older JavaScript versions. The `add` function accepts `print` as a parameter, where `print` acts as a decorator appending "is best" to the string "GFG". By using `add`, we extend and invoke `print`, effectively concatenating the strings.

Output

GFG is Best

Steps to Run Decorators

To run the decorators in JavaScript, we need to configure babel in out projec. Below is a step-by-step guide

Step 1: Initialize a Node App

npm init

Step 2: Install Babel and Required Plugins

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators

The updated dependencies after installing above pacakges are:

"devDependencies": {
 "@babel/cli": "^7.25.7",
 "@babel/core": "^7.25.8",
 "@babel/plugin-proposal-decorators": "^7.25.7",
 "@babel/preset-env": "^7.25.8"
}

Step 3: Configure .babelrc file

// Filename - .babelrc
{
 "plugins": [
 ["@babel/plugin-proposal-decorators", { "version": "legacy" }]
 ],
 "presets": ["@babel/preset-env"]
}

Step 4: Define Decorator in index.js file

// Filename - index.js
let variable = function (target) {
 target.property = 'GFG is best';
}

// Decorator
@variable
class GFG { }

// Print in the console
console.log(GFG.property);

Step 5: Compile the code using Babel

npx babel index.js --out-file compiled_output.js

This command will output the compiled file which will look like this:

GFG is best

Step 6: Run the output file

node compiled_output.js

The below example illustrates the decorators in JavaScript: 

Example 1: Defining a decorator variable that adds a property to the class GFG, which is then accessed to log "GFG is best" in the console.

Output

GFG is best

Example 2: Defining a decorator factory variable that sets a class property based on the passed argument, assigning "GFG is Green" to GFG.property and logging it.

Output

GFG is Green

Why to uses Decorator ?

• Decorators allow for decorating code in an efficient and understandable way.
• Applying the same techniques to different parts of the code or wrapping functions manually can be challenging.
• In ES6, decorators help resolve these difficulties by providing a clear syntax for wrapping code with functions or additional logic.
• Decorators offer a standardized approach to applying wrappers around functions or other code blocks.
• Although JavaScript decorators are not yet directly supported, future versions may include native support for them.

Types of Decorators

Decorators are called by the appropriate details of the item which will be decorated. Decorators are actually functions that return another function. There are two types of decorators are supported now:  

1. Class member decorators
2. Class Decorators

Class Member Decorators

These decorators are applied to a single member of a class. This decorator has properties, methods, getters, and setters. This decorator accepts 3 parameters:

• target: The class to which the member belongs to.
• name: Name of the class member.
• descriptor: Description of the member which is the object that is passed to Object.defineProperty.

Example 1: This example defines a method decorator gfg that logs the parameters and result of the add method in the geek class.

Output

parameters: 100, 200
addition: 300

Example 2: This example demonstrates a readonly decorator to make the getColor method of the car class non-writable, preventing it from being overridden.

Output

car is Black

Class Decorators

These decorators are applied to the entire class. These functions are called with a single parameter which is to be decorated. This function is a constructor function. These decorators are not applied to each instance of the class, it only applies to the constructor function. These decorators are less useful than class member decorators. Because we can use a simple function to do everything which can be done by these decorators.  

Example: This example demonstrates using a log decorator to log the parameters passed to the gfg class constructor.

Output

(...args) => 
 {
 console.log(`Parameters : args`);
 return new Class(...args);
 }

Benefits to use Decorators

• Decorators allow you to add new functionality to an object without modifying its code. This can be useful for adding behavior such as logging, error handling, or security checks, without changing the core functionality of the object.
• Decorators can make your code more modular and easier to maintain, as you can add or remove behavior independently of the core functionality of the object.
• Decorators can be easily composed, meaning that you can apply multiple decorators to the same object to achieve a desired behavior.

Drawbacks of using Decorators

• Decorators can make your code more complex, as they add an additional layer of abstraction to your code.
• Decorators can make your code harder to understand, especially if you are using multiple decorators on the same object.
• Decorators are a relatively new feature of JavaScript, and they are not supported in all environments.
• Overall, decorators are a useful tool that can help you add new behavior to your code in a flexible and modular way. However, it's important to consider the potential complexity and readability trade-offs when using decorators in your code.