How to execute a JavaScript function when I have its name as a string?

Front End Technology Javascript Web Development

Calling a function from a string, stored in a variable can be done in two different ways. The first approach makes use of the window object method, and the second method makes use of the eval() function.

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

Using the window[]() Method

Here, to execute the function using the function name as a string, the string should be changed to a pointer using the following syntax.

Syntax

var functionName = "string";
functionName = window[functionName]( parameters );

Here we have stored a string as a function name, and this value is called using window[].

Algorithm

STEP 1 − Define a function to display the output
STEP 2 − Define another function and assign the name of the output function as a string in a global variable. If required, a parameter can be passed on to the output function.
STEP 3 − Now call this global variable inside window[], which executes the output function.

Example

In the below example, showOutput is the function defined to display the output. winObjFunc is defined to perform window[] action towards the showOutput function name stored in the global variable strFunc. Using the syntax above, the showOutput function is called and we get the function executed.


<html>
<body>
   <h2>Using the <i>window object</i> method to execute function with its string name.</h2>
   <p id="namStrDisp"></p>
   <script>
      function showOutput(output) {
         document.getElementById('namStrDisp').innerHTML = output;
      }
      function winObjFunc() {
         strFunc = "showOutput";
         outStr = 'Output by the window object';
         window[strFunc](outStr);
      }
      winObjFunc();
   </script>
</body>
</html>

Using the eval() Method

To execute the function using the function name as a string, eval() can be used. In this case, the arguments to the function can be a statement, an expression, variables, properties of existing objects, or a sequence of expressions. Follow the syntax below to use this method. The only drawback with this method is that this has limited browser support and it’s considered to be obsolete.

Syntax

Users can follow the syntax below to use the eval() method to call function.

eval( strFunction );

Similar to the window object method, a string function name is sent as an argument to the eval() method.

Example

In the below example, evalOutput is the output function defined. The global variable evalStr stores this function with parameters as a string. Using the syntax explained above, eval() calls this string value in the variable, and we get the output function running.


<html>
<body>
   <h2>Using the <i>eval()</i> method to execute function with its string name.</h2>
   <p id="evlStrDisp"></p>
   <script>
      function evalOutput(info) {
         document.getElementById('evlStrDisp').innerHTML = info;
      }
      function evalFunc() {
         evalStr = "evalOutput('eval method here')";
         eval(evalStr);
      }
      evalFunc();
   </script>
</body>
</html>