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

21 Apr, 2019
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
javascript-functions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?