How to execute a JavaScript function using its name in a variable?

Front End Technology Javascript Web Development

What is a function in JavaScript? The JavaScript equivalent of a process is a function. A process is a series of instructions for carrying out a task or calculating a value. However, a process must accept input and produce a result to be considered a function. Additionally, there should be a clear connection between the input and the output. Follow the syntax below to define a function

This tutorial will guide you to learn the way to execute a JavaScript function using its name in a variable.

Syntax

function functionName( param1, param2, param3 )
{
   //code
}

Here, the function has a name and some arguments or parameters.

A function can be invoked in 4 different ways. As a function, as a method, as a constructor, and by call and apply.

This article will guide you to call the function using its name in a variable. We will use an anonymous function to achieve this. An anonymous function in JavaScript is a function type without a name. A function that we define as anonymous has no identifier. This is the difference between a normal function and an anonymous function.

Anonymous functions can be used as the value of callable parameters. They are used for other purposes also. The closure class is used to implement anonymous functions. After an anonymous function is created, we cannot access it. So we have to assign it somewhere. A variable can be used to assign these functions. The value of the variable can be used whenever required. When we need to use functions as values also, anonymous functions can be used.

Using the Function Name in a Variable

Here, we will learn to execute a JavaScript function using its name in a variable.

Syntax

Follow the syntax below to achieve this.

var varSt = function( Param1, param2, param3 )
{
}
varSt();

Here, varSt is the variable that holds the anonymous function, and this variable is called to invoke the function.

Algorithm

STEP 1 − Assign an anonymous function in a variable as per the syntax.
STEP 2 − Call the anonymous function to execute the anonymous function.
STEP 3 − Display the output.

Example

In the below example, we have assigned an anonymous function to a variable named varAno. varAno() is used to invoke this anonymous function, and the function displays the string specified in the function body.


<html>
<body>
   <h2>Using the JavaScript <i>function name in a variable</i></h2>
   <p id="idAnoDisp"></p>
   <script>
      var varAno = function() {
         var anoDisp = document.getElementById("idAnoDisp");
         anoDisp.innerHTML = "This is an anonymous function";
      };
      varAno();
   </script>
</body>
</html>

Example

In the below example, we have assigned an anonymous function in the variable called varNam. When varNam() is called, we get some input from the user and this input is displayed as the output. Also, we have passed the arguments to the anonymous function.


<html>
<body>
   <h2>Using the <i>function name in a variable</i> and passing the arguments to the function - user input example </h2>
   <p id="idNamDisp"></p>
   <script>
      var varName = function(str) {
         var namDisp = document.getElementById("idNamDisp");
         var namVar = prompt("What kind of function are you?", "Anonymous Function");
         namDisp.innerHTML = namVar + " <br/> ";
         namDisp.innerHTML += "The string argument is " + str;
      };
      varName("TutorialsPoint");
   </script>
</body>
</html>

In this tutorial, we learned to execute a JavaScript function using its name in a variable. These functions are used as an argument for another function. Anonymous functions are syntactically easy than regular JavaScript functions.