Array of functions in JavaScript
Last Updated :
26 Dec, 2022
Improve
Given an array containing functions and the task is to access its element in different ways using JavaScript.
Approach:
- Declare an array of functions.
- The array of functions works with indexes like an array function.
Example 1: In this example, the function call is initiated from the element of the array but the function is defined somewhere else. We can pass arguments to the function while calling.
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>Array of functions in javascript</h3>
<p id="GFG_UP" style="font-size: 19px;
font-weight: bold;">
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
function firstFun(str) {
down.innerHTML = str;
}
function secondFun(str) {
down.innerHTML = str;
}
function thirdFun(str) {
down.innerHTML = str;
}
// Declare array of functions
var arrayOfFunction = [
firstFun,
secondFun,
thirdFun
]
up.innerHTML = "Calling function from the array of functions";
// Function call
function GFG_Fun() {
arrayOfFunction[0]("This is first function");
}
</script>
</body>
Output:
Example 2: In this example, the function (anonymous) itself is defined as the elements of the array. We can access it by accessing the element of the array followed by ().
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>Array of functions in JavaScript</h3>
<p id="GFG_UP" style="font-size: 19px;
font-weight: bold;">
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
// Declare an array of functions
var arrayOfFunction = [
function() {
down.innerHTML = "Inside First function";
},
function() {
down.innerHTML = "Inside Second function";
},
function() {
down.innerHTML = "Inside Third function";
}
]
up.innerHTML = "Calling function from the array of functions";
function GFG_Fun() {
arrayOfFunction[2]();
}
</script>
</body>
Output:
