Array of functions in JavaScript - GeeksforGeeks

20 Jun, 2019
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>                    
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>                    
Output:
Before clicking on the button:
After clicking on the button:
javascript-functions
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?