How to call function from it name stored in a string using JavaScript?

There are two methods to call a function from string stored in a variable. The first one is by using the window object method and the second one is by using eval() method. The eval() method is older and it is deprecated.

Method 1: Using the window object: The window object in HTML 5 references the current window and all items contained in it. Hence we can use it to run a function in a string along with parameters to the function.

Syntax:



window[functionName](parameters)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to call function from string stored
        in a variable using JavaScript
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to call function from string stored
        in a variable using JavaScript 
    </b>
      
    <p>
        Click on the button to call the
        function in the string
    </p>
      
    <p class="example">
        GeeksforGeeks is a computer
        science portal.
    </p>
  
    <button onclick="evaluateFunction()">
        Click here
    </button>
      
    <script type="text/javascript">
      
        function changeColor(color) {
            document.querySelector('.example').style
                = `color: ${color}`;
        }
  
        function evaluateFunction() {
            stringFunction = "changeColor";
            param = 'green';
            window[stringFunction](param);
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    window-before
  • After clicking the button:
    window-after

Method 2: Using the eval() method: The other method that can be used is the eval() method. The string that may be passed on to the function may include a JavaScript expression, statement, or a sequence of statements. It can also have variables and properties of existing objects. The only problem with this method is that it is considered unsafe and may not be supported by newer browsers.

Syntax:

eval(stringFunction)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to call function from string stored
        in a variable using JavaScript
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to call function from string stored
        in a variable using JavaScript 
    </b>
      
    <p>
        Click on the button to call the
        function in the string
    </p>
      
    <p class="example">
        GeeksforGeeks is a computer
        science portal.
    </p>
  
    <button onclick="evaluateFunction()">
        Click here
    </button>
      
    <script type="text/javascript">
      
        function changeColor(color) {
            document.querySelector('.example').style
                    = `color: ${color}`;
        }
      
        function evaluateFunction() {
            stringFunction = "changeColor('green')";
            eval(stringFunction);
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    eval-before
  • After clicking the button:
    eval-after


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.