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 load a JavaScript function using the variable name?
In JavaScript, there are several ways to load and execute functions using variable names. This technique is useful when you need to dynamically call functions or store function references in variables.
Functions are blocks of reusable code that can be stored in variables and called later. JavaScript supports both named functions and anonymous functions, giving you flexibility in how you organize and execute your code.
Anonymous Functions
Anonymous functions are functions without a name. They must be assigned to a variable to be callable. This is the primary way to load a JavaScript function using a variable name.
Syntax
// Function expression
var functionName = function() {
// Function body
};
// Arrow function (ES6)
var functionName = () => {
// Function body
};
// Calling the function
functionName();
Example 1: Basic Anonymous Function
<html>
<body>
<p>Using <i>anonymous function</i> to load a JavaScript function using a variable name.</p>
<div id="result1"></div>
<script>
var anonymous = function() {
return "This is an anonymous function!";
};
document.getElementById("result1").innerHTML = anonymous();
</script>
</body>
</html>
This is an anonymous function!
Example 2: Arrow Function
<html>
<body>
<div id="result2"></div>
<script>
var divide = () => {
return 34 / 12;
};
document.getElementById("result2").innerHTML = "Result: " + divide().toFixed(2);
</script>
</body>
</html>
Result: 2.83
Example 3: Interactive Function Call
<html>
<body>
<p>Click the "Execute Function" button to run the anonymous function.</p>
<button onclick="executeFunction()">Execute Function</button>
<div id="output"></div>
<script>
var storedFunction = function() {
var currentTime = new Date().toLocaleTimeString();
return "Function executed at: " + currentTime;
};
function executeFunction() {
document.getElementById("output").innerHTML = storedFunction();
}
</script>
</body>
</html>
Dynamic Function Loading
You can also load functions dynamically using string names and the window object:
<html>
<body>
<div id="dynamic-result"></div>
<script>
// Store functions in variables
var greet = function() { return "Hello!"; };
var farewell = function() { return "Goodbye!"; };
// Dynamic function calling
var functionName = "greet";
var result = window[functionName]();
document.getElementById("dynamic-result").innerHTML = result;
</script>
</body>
</html>
Hello!
Key Benefits
- Flexibility: Functions can be assigned to variables and passed around
- Dynamic execution: Functions can be called based on runtime conditions
- Code organization: Anonymous functions help organize code without cluttering the global namespace
Conclusion
Loading JavaScript functions using variable names provides flexibility and enables dynamic programming patterns. Anonymous functions and arrow functions are the primary methods for storing executable code in variables, allowing for cleaner and more maintainable code organization.
2K+ Views
