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>