How to load a JavaScript function using the variable name?

Javascript Web Development Front End Technology

In this tutorial, we will learn to load a JavaScript function using the name of a variable.

Functions are the block of statements that takes an input and displays the result to the user after an execution. We can use these blocks of codes repeatedly by only declaring the function, and these functions can help a programmer in many ways as it also reduces efforts.

JavaScript also supports the use of functions like other programming languages. Functions in JavaScript can be either built-in or user-defined.

There are different ways to declare a function and call it. Generally, a simple Function uses its name to call itself anywhere in the program. But there are also other ways to call a function. Let's look to load a JavaScript function using the name of a variable.

Following is the type of function that allows us to load a JavaScript function using the name of a variable:

Anonymous function

The Anonymous Function

Generally, we assign a name for a function. The anonymous function is the function without a name with it. We only use the function keyword with parenthesis to declare the Anonymous function without adding a name.

We cannot access the Anonymous function by just declaring it. We have to store this function as a value in a variable. And then, we can call functions using that variable. Users can follow the syntax given below to use the Anonymous function to load a JavaScript function using the name of a variable −

Syntax

function() {
   // Function Body
}
//Using Arrow function
var var1= ()=>{
   //Function Body
};
//Calling function
var var_name=function() {
   // Function Body
};
var_name();

Example 1

In the example, we have used the Anonymous function to load a JavaScript function using the name of a variable.


<html>
<body>
   <p> Use <i> Anonymous function </i>to load a JavaScript function using
   the name of a variable. </p>
   <div id="div1"></div>
   <script>
      var anonymous = function() {
         return "This is anonymous function";
      };
      document.getElementById("div1").innerHTML = anonymous();
   </script>
</body>
</html>

In the output, you can see that we have used the Anonymous function to load a JavaScript function using the name of a variable.

Example 2

In this example, we have used the Anonymous function using the arrow function to load a JavaScript function using the name of a variable.


<html>
<body>
   <div id = "div1"></div>
   <script>
      var divide = ()=> {
         return 34/12;
      };
      document.getElementById("div1").innerHTML = divide();
   </script>
</body>
</html>

Here you can see we have used the Anonymous function with an arrow function to load a JavaScript function using the name of a variable.

Example 3

In the example, we have used the Anonymous function to load a JavaScript function using the name of a variable by clicking a button.


<html>
<body>
   <p> Click the "Click here" button to execute anonymous fucntion </p>
   <button onclick = "anonymous()">Click here</button>
   <div id="div1"></div>
   <script>
      var element = document.getElementById("div1");
      var anonymous = function() {
         var new_element = document.createElement('p');
         var text = document.createTextNode("Executing Anonymous function
         on click");
         new_element.appendChild(text);
         element.appendChild(new_element);
      };
   </script>
</body>
</html>

In the output, you can see that we have used the Anonymous function to load a JavaScript function using the name of a variable on clicking a button. We have printed a message on the screen by clicking a button.

We have learned to use an anonymous function, using which we can load a JavaScript function using the name of the variable. We have also used the arrow function to declare an Anonymous function.