What are decorators and how are they used in JavaScript?

In this tutorial, you will learn about JavaScript decorators and get to know about their inner workings and uses.

What are Decorators in JavaScript?

The word decorator means combining a set of code or program with another or can be said as wrapping a function with another function to extends the functionality or working of the function. Decorator can also be called as decorator function.

Developers have been using this decorator term in other languages like python, C# and now JavaScript has also introduced the decorator.

Function decorators

In JavaScript functions behaves like objects so they are also known as a first-class object, this happened because we can assign the function to a variable or return the function from the function or can pass the function as a parameter to a function.

Example

const func_variable= function(){
   console.log("Hey there");
}
func_variable()

Example 

Passing function to another function

// MainFunction function takes a function as a parameter
function MainFunction(func) {
   func()
   console.log("Main function")
}

// Assigning function to a variable
var argumentFunction = function() {
   console.log("passed function")
}

//passing argumentFunction function to to MainFunction
MainFunction(argumentFunction)

Example 

Returning a function by another function

function SumElement(par1, par2) {
   var addNumbers = function () {
      result = par1+par2;
      console.log("Sum is:", result);
   }
   
   // Returns the addNumbers function
   return addNumbers
}
var PrintElement = SumElement(3, 4)
console.log(PrintElement);
PrintElement()

Higher order function

Higher order functions are function that takes a function as a parameter and after performing some operations return the function. The above function discussed is a higher order function which is printAdditionFunc.

Example 

// higher order function
   function PrintName(name) {
      return function () {
         console.log("My name is ", name);
      }
   }
   
// output1 is a function, PrintName returns a function
var output1 = PrintName("Kalyan")
output1()

var output2= PrintName("Ashish")
output2()

You might be thinking that we already have decorators as higher-order functions then why do we need decorators separately?

So, we have the function decorators which is a higher order JavaScript functions but when classes came in JavaScript then we also have functions inside the class, Where the higher-order functions became fail which was acting like decorators.

Example 

Let’s see the issue with higher order function with class −

// higher is a decorator function
function higher(arg) {
   return function() {
      console.log("First "+ arg.name)
      arg() // Decorator function call
      console.log("Last " + arg.name)
   }
}
class Website {
   constructor(fname, lname) {
      this.fname = fname
      this.lname = lname
   }
   websiteName() {
      return this.fname + " " + this.lname
   }
}
var ob1 = new Website("Tutorials", "Point")
// Passing the class method websiteName to the higher order function
var PrintName = higher(ob1.websiteName)
PrintName()

Here what happens is when higher function is called then it calls its parameter which is a member function of class as websiteName function here. As the function websiteName is called from outside class function so value of this is undefined inside the websiteName function. So, this is the reason behind this log error.

So, to solve this we will also pass the object of Website class which will eventually preserve the value of this.

//higher is a decorator function
function higher(ob1, arg) {
   return function() {
      console.log("Execution of " + arg.name + " begin")
      arg.call(ob1) //// Decorator function call
      console.log("Execution of " + arg.name + " end")
   }
}
class Website {
   constructor(fname, lname) {
      this.fname = fname
      this.lname = lname
   }
   websiteName() {
      return this.fname + " " + this.lname
   }
}
var ob1 = new Website("Tutorials", "Point")
//Passing the class method websiteName to the higher order function
var PrintName = higher(ob1, ob1.websiteName)
PrintName()

Here inside PrintName function we call arg (which is a websiteName function) by the help of call function which is calling the websiteName function by the help of Website class object so the value of this pointer will be object of Website class and is has both the variables which is fname and lname so it will work without any error.

Hope you got to know about the decorator and it’s uses by the help of this article.