Introduction to JavaScript Decorators

What Are JavaScript Decorators?

JavaScript decorators are special functions that modify the behavior of classes and their methods.

They offer a clean and declarative way to augment methods, properties, or entire classes.

Initially popularized in TypeScript and other modern languages, decorators are a hot topic in JavaScript development.

Let’s dive in and understand how these work, their syntax, and when to use them.

TL;DR: How Do I Use Decorators in JavaScript?

To use decorators in JavaScript, you typically need to enable experimental features or use TypeScript.

Here’s a quick example of how to create and use a decorator:


// Define a simple decorator
function logMethod(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Method called: ${key}`);
return originalMethod.apply(this, args);
};
return descriptor;
}

// Use the decorator
class ExampleClass {
@logMethod
exampleMethod() {
console.log('Hello, world!');
}
}

const example = new ExampleClass();
example.exampleMethod();


This code snippet defines a decorator called logMethod and applies it to exampleMethod in ExampleClass.

Why Are Decorators Useful?

Decorators improve code readability and maintainability.

They allow you to add functionality without modifying existing code.

They can handle cross-cutting concerns like logging, authentication, and caching.

This separation of concerns aids in keeping your code modular and clean.

How Do Decorators Work?

Decorators are higher-order functions, meaning they take another function as an argument and return a new function.

They are applied at runtime to modify or extend the behavior of classes or methods.

Let’s break down the concepts by looking at examples involving method, property, and class decorators.

Method Decorators

A method decorator is a function applied to a method of a class.

It receives three arguments: the target object, the name of the method, and its descriptor.

Here’s an example of a method decorator that logs the method name:


function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log(`Calling ${name}`);
return original.apply(this, args);
};
return descriptor;
}

class MyClass {
@log
sayHello() {
console.log('Hello!');
}
}

const myClass = new MyClass();
myClass.sayHello(); // Logs: "Calling sayHello" then "Hello!"


Property Decorators

Property decorators are functions applied to class properties.

They receive two arguments: the target and the property name.

Here’s an example that ensures the property is readonly:


function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}

class MyClass {
@readonly
name = 'MyClass';
}
const myClass = new MyClass();
myClass.name = 'NewName'; // Error: Cannot assign to read-only property.


Class Decorators

Class decorators are functions applied to the entire class.

They receive one argument: the constructor of the class.

Here’s an example that adds a static method to the class:


function staticMethod(target) {
target.staticMethod = function () {
console.log('Static method called!');
};
return target;
}

@staticMethod
class MyClass {}

MyClass.staticMethod(); // Logs: "Static method called!"


When to Use JavaScript Decorators

Decorators are beneficial in several scenarios.

Use them when you need to add shared functionality like logging or authorization checks across multiple methods or properties.

They are especially useful when working with frameworks like Angular or NestJS, which heavily utilize decorators for various features.

Setting Up Decorators in JavaScript

Currently, decorators are an experimental feature in JavaScript.

You need to enable decorators in Babel or TypeScript to use them.

Here’s how you can enable decorators in TypeScript:


// Install TypeScript and Babel
npm install --save-dev typescript babel-plugin-transform-decorators-legacy

// Update your tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}


Common Use Cases for Decorators

Decorators are versatile and can be applied in various contexts.

Let’s explore some common use cases including logging, validation, and memoization.

Logging with Decorators

Logging is a common requirement in applications.

Using decorators to handle logging helps keep the code clean and maintainable.

Here’s an example:


function logMethod(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Method ${key} called with arguments: ${JSON.stringify(args)}`);
return originalMethod.apply(this, args);
};
return descriptor;
}

class Calculator {
@logMethod
add(a, b) {
return a + b;
}
}

const calculator = new Calculator();
calculator.add(2, 3); // Logs: "Method add called with arguments: [2,3]"


Validation with Decorators

Validation is another common requirement, especially in web applications.

Decorators can be employed to validate method arguments.

Here’s an example:


function validate(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
for (let arg of args) {
if (typeof arg !== 'number') {
throw new Error('Invalid argument type');
}
}
return originalMethod.apply(this, args);
};
return descriptor;
}

class MathOperations {
@validate
multiply(a, b) {
return a * b;
}
}

const ops = new MathOperations();
ops.multiply(2, 'three'); // Throws: Invalid argument type


Memoization with Decorators

Memoization is a technique to optimize performance by caching results of expensive function calls.

Using decorators simplifies the implementation of memoization.

Here’s an example:


function memoize(target, key, descriptor) {
const originalMethod = descriptor.value;
const cache = new Map();
descriptor.value = function (...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = originalMethod.apply(this, args);
cache.set(key, result);
return result;
};
return descriptor;
}

class Fibonacci {
@memoize
fib(n) {
if (n < 2) return n; return this.fib(n - 1) + this.fib(n - 2); } } const fib = new Fibonacci(); console.log(fib.fib(10)); // First call calculates, subsequent calls are fast

FAQs

What are JavaScript decorators?

JavaScript decorators are functions that add behavior to classes, methods, or properties.

Are decorators natively supported in JavaScript?

Decorators are experimental and not natively supported yet; you need Babel or TypeScript.

Can decorators be stacked?

Yes, multiple decorators can be applied to a single class or method.

Why are decorators useful?

Decorators improve code readability and help manage cross-cutting concerns like logging.

How do I enable decorators in TypeScript?

Enable them by setting "experimentalDecorators" and "emitDecoratorMetadata" to true in tsconfig.json.

What are common use cases for decorators?

Common use cases include logging, validation, memoization, and handling cross-cutting concerns.

Decorators in Popular Frameworks

Many modern JavaScript frameworks and libraries utilize decorators to simplify code and enhance functionality.

Let's explore how some popular frameworks like Angular and NestJS implement decorators.

Angular and Decorators

Angular is a widely-used framework that heavily relies on decorators for its core functionalities.

Decorators in Angular are used to define metadata about classes, methods, properties, and parameters.

For example, the @Component decorator is used to mark a class as an Angular component:


import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularApp';
}


In this snippet, the @Component decorator provides metadata that configures the component.

Other Angular decorators include @NgModule, @Injectable, and @Directive.

NestJS and Decorators

NestJS is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications.

NestJS makes extensive use of decorators to define and manipulate classes, methods, properties, and parameters.

For example, the @Controller decorator designates a class as a controller:


import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
@Get()
findAll() {
return 'This action returns all cats';
}
}


In this example, @Controller and @Get are decorators that define routing metadata.

Other decorators in NestJS include @Injectable, @Module, and @Param.

Pros and Cons of Using Decorators

Pros:

• Improved code readability and maintainability.
• Separation of concerns.
• Reusable and modular code.
• Easier to implement cross-cutting concerns.

Cons:

• Experimental feature, not standard in JavaScript yet.
• Requires additional tooling like Babel or TypeScript.
• Can introduce complexity for new developers.

Common Pitfalls and How to Avoid Them

Using decorators can sometimes lead to pitfalls if not used correctly.

Here’s a list of common pitfalls and how to avoid them:

Misunderstanding the Scope

Decorators are applied at runtime and should not be used for static checks.

Always test the runtime behavior to ensure the decorator works as expected.

Overuse

While decorators can enhance functionality, overusing them can make the codebase hard to understand.

Use decorators judiciously and always document their purpose.

Dependency on Tooling

Decorators require enabling experimental features or using tools like Babel and TypeScript.

Ensure your build process includes the necessary configurations for decorators.

Advanced Techniques with Decorators

Decorators can be extended to cover more advanced use cases in your applications.

Let’s explore some of these advanced techniques:

Combining Multiple Decorators

Multiple decorators can be stacked to further enhance or modify the behavior of a class or method.

Here's an example:


function decoratorOne(target, key, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log('Decorator One');
return original.apply(this, args);
};
return descriptor;
}

function decoratorTwo(target, key, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log('Decorator Two');
return original.apply(this, args);
};
return descriptor;
}

class MyClass {
@decoratorOne
@decoratorTwo
myMethod() {
console.log('Original Method');
}
}

const myClass = new MyClass();
myClass.myMethod(); // Logs: "Decorator Two" "Decorator One" "Original Method"


In this example, @decoratorOne and @decoratorTwo are applied to myMethod.

Both decorators are executed in sequence, each modifying the method's behavior.

Applying Decorators to Parameters

Decorators can also be applied to method parameters to enhance validation or modify parameters.

Here’s an example:


function logParameter(target, key, index) {
const originalMethod = target[key];
target[key] = function (...args) {
console.log(`Parameter at index ${index}: ${args[index]}`);
return originalMethod.apply(this, args);
};
}

class MyClass {
myMethod(@logParameter param) {
console.log('Inside myMethod', param);
}
}

const myClass = new MyClass();
myClass.myMethod('TestParam'); // Logs: "Parameter at index 0: TestParam" then "Inside myMethod TestParam"


In this example, @logParameter logs the parameter at the specified index when the method is called.

Best Practices for Using Decorators

• Limit the number of decorators to keep the codebase maintainable.
• Document each decorator's purpose and usage.
• Test decorators thoroughly to ensure they behave as expected.
• Use decorators to handle cross-cutting concerns like logging and validation.

FAQs

What are JavaScript decorators?

JavaScript decorators are functions that modify the behavior of classes, methods, or properties.

Are decorators natively supported in JavaScript?

Decorators are experimental and not natively supported yet; you need Babel or TypeScript.

Can decorators be stacked?

Yes, multiple decorators can be applied to a single class or method.

Why are decorators useful?

Decorators improve code readability and help manage cross-cutting concerns like logging.

How do I enable decorators in TypeScript?

Enable them by setting "experimentalDecorators" and "emitDecoratorMetadata" to true in tsconfig.json.

What are common use cases for decorators?

Common use cases include logging, validation, memoization, and handling cross-cutting concerns.

How do I apply multiple decorators to a single method?

Place them one after another above the method definition.

What is a common pitfall when using decorators?

Overusing decorators can make the codebase hard to understand.

Do I need Babel to use decorators in JavaScript?

Yes, Babel is required to enable decorators in standard JavaScript through experimental features.

How do decorators improve code maintainability?

They allow functionality to be added without modifying the existing code, keeping it clean.

Shop more on Amazon