Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to execute a JavaScript function when I have its name as a string?
Calling a function from a string stored in a variable can be done in multiple ways in JavaScript. The most common approaches are using the window object (for global functions), object property access, and the eval() function (though not recommended).
This tutorial will guide you through different methods to execute a JavaScript function using its name as a string.
Using the window Object Method
The window object contains all global functions and variables. You can access any global function by treating the function name as a property of the window object.
Syntax
var functionName = "string"; window[functionName](parameters);
Example
<html>
<body>
<h2>Using the window object method to execute function with its string name</h2>
<p id="output"></p>
<script>
function showMessage(message) {
document.getElementById('output').innerHTML = message;
}
function callByString() {
var functionName = "showMessage";
var message = "Function called using window object!";
window[functionName](message);
}
callByString();
</script>
</body>
</html>
Using Object Property Access
For functions that are methods of an object, you can use bracket notation to call them dynamically.
Example
<html>
<body>
<h2>Using object property access to call functions</h2>
<p id="objectOutput"></p>
<script>
var calculator = {
add: function(a, b) {
return a + b;
},
multiply: function(a, b) {
return a * b;
}
};
function callObjectMethod() {
var methodName = "add";
var result = calculator[methodName](5, 3);
document.getElementById('objectOutput').innerHTML = "Result: " + result;
}
callObjectMethod();
</script>
</body>
</html>
Using the eval() Method (Not Recommended)
The eval() function executes JavaScript code represented as a string. However, it's considered dangerous and is not recommended due to security risks and performance issues.
Syntax
eval(stringContainingFunction);
Example
<html>
<body>
<h2>Using the eval() method to execute function (Not Recommended)</h2>
<p id="evalOutput"></p>
<script>
function displayMessage(text) {
document.getElementById('evalOutput').innerHTML = text;
}
function useEval() {
var functionCall = "displayMessage('Called using eval method')";
eval(functionCall);
}
useEval();
</script>
</body>
</html>
Comparison of Methods
| Method | Security | Performance | Recommended |
|---|---|---|---|
| window object | Safe | Fast | Yes (for global functions) |
| Object property access | Safe | Fast | Yes (for object methods) |
| eval() | Unsafe | Slow | No |
Key Points
Use window object method for global functions
Use bracket notation for object methods
Avoid eval() due to security and performance concerns
Function names are case-sensitive when used as strings
Conclusion
The window object method and object property access are the safest and most efficient ways to call functions by their string names. Always avoid using eval() in production code due to security vulnerabilities and performance issues.
2K+ Views
