What are decorators and how are they used in JavaScript?

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

What are decorators in JavaScript?

The word decorator means to combine one set of code or program with another set of code or program, or it can be said to wrap a function with another function to extend the function or work of that function. Decorators can also be called decorator functions.

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

Function Decorator

In JavaScript, functions behave like objects, so they are also called first class objects, this happens because we can assign functions to variables or return functions from functions, or we can pass functions as parameters Give function.

Example

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

Example

Passing a 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 through 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 functions

Higher-order functions refer to functions that take a function as a parameter and return that function after performing certain operations. The function discussed above is a higher-order function, namely 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 may be thinking, we already have decorators as higher-order functions, so why do we need separate decorators?

So, we have the function decorator, which is a higher-order JavaScript function, but when the class appears in JavaScript, we also have functions within the class, where the higher-order function becomes failed, just like the decorator.

Example

Let’s look at the problem of higher-order functions of classes -

// 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()

What happens here is that when the higher function is called, it calls its argument, which is a member function of the class, as the websiteName function here. Since the function websiteName is called from an external class function, the value of the function is undefined inside the websiteName function. So this is the reason behind this log error.

So, to solve this problem, we will also pass an object of class Website which will eventually hold 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()

In the PrintName function, we call the arg (which is a websiteName function) through the call function, which calls the websiteName function with the help of the Website class object, so the value of the pointer will be the object of the Website class and is the object with fname and lname variables so it will work without any error.

I hope you will understand decorators and their uses with the help of this article.

The above is the detailed content of What are decorators and how are they used in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!