Array of functions in JavaScript
Last Updated :
26 Dec, 2022
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.
html
< 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 ().
html
< 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:
Share your thoughts in the comments
Please Login to comment...