ReviseAlgo Logo

ES6+ Modern JavaScript

Decorators

Master modern metaprogramming in JavaScript using Class Decorators. Learn class structure modification, method decoration, and the Stage 3 decorators proposal.

Last Updated: July 15, 2026 • 12 min read

1. Introduction

Decorators are a Stage 3 proposal in ECMAScript that allow you to modify or extend the behavior of JavaScript classes, methods, accessors, and fields. They provide a clean, declarative syntax (prefixed with the @ symbol) to wrap class declarations and properties.

2. Why It Matters

Writing cross-cutting concerns (like logging method execution times, checking access control permissions, or auto-binding methods) can result in repetitive boilerplate code. Decorators allow you to extract this logic into clean, reusable functions that can be applied to classes and methods declaratively.

3. Real-World Analogy

Think of Adding Accessories to a Car:

  • Direct Modification: Dismantling the car body to install a custom turbo charger directly. This is complex and modifies the core engineering blueprints.
  • Decorator Accessories (Declarative Wrapping): Wrapping the car in optional add-on kits: adding a GPS unit (@gps), a roof cargo box (@cargo), or a security alarm (@alarm). You don't change how the car is manufactured; you wrap it in standard accessories that extend its capabilities.

4. Class & Method Decorators

The Stage 3 proposal defines decorators as functions that receive the target class or method element and return a modified element. Let's explore class and method decorators:

1. Class Decorator:

Wraps a class definition, allowing you to modify its constructor or extend its properties.

2. Method Decorator:

Wraps a class method, allowing you to intercept function execution, modify arguments, or change return values.

5. Practical Example

This script demonstrates implementing a @bound method decorator that automatically binds methods to the class instance, resolving the common this context loss issue:

6. Common Mistakes

  • • Running decorators in standard engines without transpilers: Since decorators are a Stage 3 proposal, running decorator syntax directly in modern browsers or Node.js without a transpiler (like TypeScript or Babel) throws a SyntaxError. Always compile your code if you use decorator syntax.

7. Quick Quiz

Q1: Which character symbol is used to apply a decorator function to a class or method?

A) #

B) @

Answer: B — The @ symbol is used as the prefix modifier for applying decorators in JavaScript class syntax.

8. Scenario-Based Challenge

The Execution Timer logger:

An application performs database calls: fetchRecords(). You want to measure the execution time of this method automatically. Write a method decorator @time that console logs the execution time (in milliseconds) of any method it wraps.

9. Debugging Exercise

Explain why this decorator fails to execute, and how to fix it:

// JavaScript file running directly in Node.js 18
@validate
class Database {
  // SyntaxError: Unexpected character '@'! Why?
}
View Solution

Diagnosis: Node.js 18 does not support the decorator syntax natively because the specification is still a proposal. Running this script directly throws a SyntaxError.

Fix: Set up a compiler (like TypeScript or Babel) to compile the decorator syntax into standard JavaScript before running the script:

// tsconfig.json setup
{
  "compilerOptions": {
    "experimentalDecorators": true // For legacy decorators, or standard target outputs
  }
}

10. Interview Questions

🟢 Q1: Describe the concept of Decorators in JavaScript and explain why they are useful.

Answer: Decorators are functions that can be applied to classes, methods, fields, or accessors using the @decoratorName syntax. They allow you to modify or extend the behavior of elements without altering their core definition.
They are useful because:
• Reusability: You can extract cross-cutting concerns (like logging, access control, validation, or timing) into clean, reusable helper functions.
• Readability: They provide a clean, declarative syntax that documents how classes and methods behave, reducing boilerplate code.

11. Production Considerations

  • • Spec Version Divergence: TypeScript has supported decorators for years (legacy experimental decorators), but they use a different API design than the official Stage 3 proposal. Ensure your compiler options are set to match the standard specification target.