How to Use Decorators in JavaScript?

JavaScript Decorators are a powerful design pattern that enables the addition of behavior to an individual object, whether in a static or dynamic manner while keeping the behavior of other objects from the same class unaffected. They serve as a means to enhance the functionality of a function without making any modifications to the underlying function itself.

By employing decorators, developers can seamlessly extend the capabilities of objects or functions without the need for extensive modifications or the risk of introducing unintended side effects. This design pattern promotes modularity and reusability by allowing the addition of new functionalities to specific objects or functions while keeping the core behavior intact.

Decorating code can be a challenging task, especially when it comes to applying the same techniques to multiple code pieces or wrapping one piece of code with another. However, in ES6, decorators emerge as a solution to these difficulties. They offer an efficient and comprehensible approach to wrapping code with additional functions or code snippets. Moreover, decorators introduce a clear and concise syntax for applying these wrappers.

Although JavaScript decorators are not natively supported at present, there is a possibility that decorators will be officially added to the JavaScript language in the future. This potential addition would provide direct support for decorators, making them an integral part of JavaScript's feature set.

Types of JavaScript 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. Members of classes

1. Class member decorators:

Class member decorators are applied to individual members of a class, such as properties, methods, getters, or setters. These decorators are actually functions that return another function. They accept three parameters:

• target: Refers to the class to which the member belongs.

• name: Represents the name of the class member being decorated.

• descriptor: Provides a description of the member and is an object passed to Object.defineProperty.

Class member decorators offer a way to modify or enhance specific members of a class without affecting the entire class or other members.

2. Members of classes:

Decorators for entire classes are applied to the entire class rather than individual members. These decorators are functions that are called with a single parameter, which is the class to be decorated. Essentially, these decorators act as constructor functions. It's important to note that they are not applied to each instance of the class but rather to the constructor function itself.

While these decorators can modify the behavior or properties of the class, they are generally considered less useful compared to class member decorators. This is because many functionalities provided by these decorators can be achieved using simple functions instead.

How to Use JavaScript Decorators?

To use JavaScript decorators, you need to follow a special syntax where they are prefixed with an @ symbol and placed immediately before the code you want to decorate.

You can apply multiple decorators to the same piece of code, and they will be executed in the order you declare them.

For example:

@log()
@immutable()
class Example {
  @time('demo')
  doSomething() {
    // ...
  }
}

In this example, three decorators are applied: @log, @immutable, and @time. The @log decorator can log all access to the class, @immutable can make the class immutable by using Object.freeze on new instances, and @time records the execution time of the doSomething method and logs it with a unique tag.

Currently, using decorators requires transpiler support since no current browser or Node release supports them natively. If you're using Babel, you can enable support by using the transform-decorators-legacy plugin.

Now, let's explore how decorators can be used to decorate class properties, class methods, and entire classes.

Decorating Class Fields:

In the following example, we use the decorator syntax on a class field:

function locked(target, key, descriptor) {
    return {
        ...descriptor,
        writable: false
    };
}

class Data {
    @locked
    password = 'abcd';
}

The locked decorator function takes three parameters: target, key, and descriptor. The target represents the object or function being decorated, key refers to the property name on the target, and descriptor contains all the properties of the target, including the decorated ones.

By returning a new descriptor object with the original properties and values, except setting writable to false, we create a new descriptor that prevents changing the password field after it's been instantiated.

Decorating Class Methods:

Now let's look at an example of using a decorator on a method:

function logMessage(target, name, descriptor) {
    const original = descriptor.value;
    const fn = function(...args) {
        try {
            const result = original.apply(this, args);
            return result;
        } catch (error) {
            console.log(`Error: ${error}`);
            throw error;
        }
    };
    return {
        ...descriptor,
        value: fn
    };
}

class User {
    @logMessage
    getData = () => {
        // API request here
        throw new Error('Something went wrong');
    };
}

const user = new User();
user.getData(); // Error: Something went wrong

In this example, the logMessage decorator adds some error handling to the getData method. If an error occurs during the API request, it will be caught and logged to the console.

Decorating a Class:

Lastly, we'll see how to apply a decorator to an entire class:

function storeInCache(target) {
    return (...args) => {
        const result = new target(...args);
        addToCacheMap();
        return result;
    };
}

@storeInCache
class User {
    // ...
}

const user = new User(); // Automatically stored in cache

The @storeInCache decorator is applied to the User class, and it automatically stores any new instances of User in a cache map.