Array of functions in JavaScript
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 function works with indexes like an array function.
Example 1: In this example, the function call is initiated from the element of array but the function is defined somewhere else. We can pass arguments to the function while calling.
<!DOCTYPE HTML> < html > < head > < title > Array of functions in javascript </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < 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 > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: In this example, the function (anonymous) itself is defined as the elements of array. We can access it by accessing the element of array followed by ().
<!DOCTYPE HTML> < html > < head > < title > Array of functions in JavaScript </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < 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 > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: