Open In App

Array of functions in JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 



Last Updated : 26 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads