It seems like the original poster was trying to achieve the following:

var function_list = [
    function() { first_function('a string') },
    function() { second_function('a string') },
    function() { third_function('a string') },
    function() { fourth_function('a string') }
]

for (index = 0; index < function_list.length; index++) {
    function_list[index]();
}

Hopefully, this explanation will be beneficial to others who are searching for guidance on how to execute JavaScript functions stored in an array.

It's difficult to provide a precise solution without more information about your specific goal. However, one approach you could consider is using object notation to define a set of functions:

const myFunctions = {
  funcOne: function(input) {
    // implement function logic here
  },

  funcTwo: function(input) {
    // implement function logic here
  },

  funcThree: function(input) {
    // implement function logic here
  }
}

You can then call one of these functions by:

myFunctions.funcOne('example input')

To enhance the discussion, I wanted to share a simpler approach for executing multiple functions within an Array using the shift() method in JavaScript. You can find the original explanation here.

var x = function(){ console.log("Function X") }
var y = function(){ console.log("Function Y") }
var z = function(){ console.log("Function Z") }

var arrayOfFunctions = [x, y, z];

while (arrayOfFunctions.length){
   arrayOfFunctions.shift().call();
}

Alternatively:

const functions = {
  functionOne: function(input) {
    // perform some action
  },

  functionTwo: function(input) {
    // perform some action
  },

  functionThree: function(input) {
    // perform some action
  }
}

This code snippet is similar to what Darin Dimitrov did, but it demonstrates how you can dynamically create and store functions along with their arguments. I hope you find it helpful :)

var argumentsList = ['hello', 'you', 'there'];
var functionsList = [];

for (var i = 0; i < argumentsList.length; i++) {
var currentArgument = argumentsList[i]; 

  functionsList.push(function(currentArgument){
    console.log(currentArgument);
  });
};

for (var i = 0; i < functionsList.length; i++) {
  functionsList[i](argumentsList[i]);
}

Earlier, we observed some examples with iteration. Now, let's achieve the same result using the forEach method:

var functions = [function () {
        console.log(1)
  },
  function () {
        console.log(2)
  }
];

functions.forEach(function (func) {
  func(); // This will output 1, followed by 2
});
//for (i = 0; i < funcs.length; i++) funcs[i]();

If you find yourself in a situation where you need to dynamically pass callbacks, consider passing a single object as an argument. This approach allows for better control over the functions you wish to execute with respective parameters.

function displayOutput(arg) {
    console.log(arg)
};

function displayModifiedOutput(arg) {
    console.log(arg + ' create a new output')
};

var obj = {
    callbacks: [displayOutput, displayModifiedOutput],
    parameters: ["data", "another data"];
};

function performActions(obj) {
    var count = obj.counter
    for (count; count < (obj.callbacks.length - obj.len); count++) {
        obj.callbacks[count](obj.parameters[count]);
    }
};

obj.counter = 0;
obj.len = 0;
performActions(obj); 

//data
//another data create a new output

obj.counter = 1;
obj.len = 0;
performActions(obj);

//another data create a new output

Using ES6 callbacks to execute multiple functions simultaneously 🎉

const executeFunctions = (functions) => {
  functions().forEach((func) => func)
}

executeFunctions(() => [
  console.log("Function 1 executed"),
  console.log("Function 2 executed"),
  console.log("Function 3 executed")
])

Wow, there are some really interesting solutions out there...

const run = (fn) => fn()
const functionsArray = [func1, func2, func3]

const outcomes = functionsArray.map(run)

or if you prefer to pass each function's result to the next one sequentially:
combine(func3, func2, func1)

combine is not a default feature, but tools like ramda, lodash, or even redux offer this functionality

Indeed, this is accurate

let functions_array = {
            "everything": function(status) { 
                console.log(1 + status); 
              },
                "circle": function(status) { 
                console.log(13 + status); 
              }                     
        };

functions_array.everything(27);
functions_array.circle(7);

When utilizing ES6 syntax, for a sequence of functions that you want to pass the same object through (such as a HTML abstract syntax tree), you can leverage the power of for...of to execute each function in a specified array:

const setMainElement = require("./set-main-element.js")
const cacheImages = require("./cache-images.js")
const removeElements = require("./remove-elements.js")

let htmlAst = {}

const pipeline = [
    setMainElement,
    cacheImages,
    removeElements,
    (htmlAst) => {
        // Implementing a dynamic closure here.
    },
]

for (const pipe of pipeline) {
    pipe(htmlAst)
}

This answer was really helpful for me, although I did encounter some difficulties when trying to call each function in my array multiple times. So, for those who are beginners like me, here is a simple guide on how to create an array of functions and how to call either one or all of them in a few different ways.

Let's start by creating the array.

let functionsArray = [functionOne, functionTwo, functionThree];

To call a specific function in the array, you can use its index (remember that the index starts at 0).

functionsArray[0]();

Don't forget to include the parentheses after the function name to actually call it.

If you want to call all the functions in the array, there are a couple of different methods you can use.

Using a For Loop

for (let index = 0; index < functionsArray.length; index++) {
  functionsArray[index]();
}

Make sure to include the parentheses to execute the function.

Using ForEach ForEach is convenient because you don't have to worry about the index; the function element is automatically passed to you. You can use it as shown below (using a non-arrow function example):

functionsArray.forEach(element => {
    element();
});

In a ForEach loop, you can rename the variable element as you wish. Here's an example without using arrow functions:

functionsArray.forEach(
    function(funFunctionPassedIn) {
        funFunctionPassedIn();
    }
);

What about Map? It's not recommended to use Map in this scenario, as it creates a new array. Using Map when we don't need the new array is considered an anti-pattern (not a good practice).

We should avoid using map if we're not utilizing the returned array or if we're not returning a value from the callback. Source

An efficient method to execute them all quickly:

[function_one, ..., function_n].forEach (function(func) {
    func('input string');
}); 

The issue with this array of functions lies not in the format of the array, but rather in how the functions are being called. One possible solution is to use a simple `eval()` function.

array_of_function = ["fx1()","fx2()","fx3()",.."fxN()"]
var zzz=[];
for (var i=0; i<array_of_function.length; i++)
     { var zzz += eval( array_of_function[i] ); }

This approach worked for me when other methods failed. Hopefully it will be helpful to others facing similar challenges.

How to Use Function.prototype.bind()

var array_of_functions = [
        first_function.bind(null,'a string'),
        second_function.bind(null,'a string'),
        third_function.bind(null,'a string'),
        forth_function.bind(null,'a string')
    ]

I encountered a few hurdles when attempting to tackle this issue... I tried the straightforward approach, but it appeared to not do the trick. It simply added an empty function somehow.

array_of_functions.push(function() { first_function('a string') });

To overcome this, I opted to utilize an array of strings, and later employed eval:

array_of_functions.push("first_function('a string')");

for (var Func of array_of_functions) {
   eval(Func);
}

Perhaps a solution along these lines could be effective:

[func1, func2, func3].map((func) => func('a string'))

Perhaps this information could be beneficial to someone.

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         window.controller = {
             currentHandler: 0,
             eventHandlers: []
         };
         
         controller.execute = function (num) {
             this.eventHandlers[this.currentHandler](num);
         };
         
         controller.switchHandler = function (num) {
             if (num >= this.eventHandlers.length || num < 0) {
                 throw new Error('Num must be between 0 and ' + (this.eventHandlers.length - 1), num);
             }
             this.currentHandler = num;
         };
         
         var handler1 = function (num) {
             console.log("Handler 1. Argument value is " + num);
         };
         
         var handler2 = function (num) {
             console.log("Handler 2. Argument value is " + num);
         };
         
         var handler3 = function bar(num) {
             for (var i=0; i<num; i++) {
                 console.log(i);
             }
         };
         
         controller.eventHandlers.push(handler1);
         controller.eventHandlers.push(handler2);
         controller.eventHandlers.push(handler3);
      </script>
   </head>
   <body>
      <input type="button" onclick="window.controller.execute(2)" value="Execute handler with parameter 2">
      <input type="button" onclick="window.controller.execute(4)" value="Execute handler with parameter 4">
      <p>
      <div>
         <select name="featured" size="1" id="item1">
            <option value="0">First handler</option>
            <option value="1">Second handler</option>
            <option value="2">Third handler</option>
         </select>
         <input type="button" onclick="controller.switchHandler(document.getElementById('item1').value);" value="Switch handler">
      </div>
      </p>
   </body>
</html>

Apologies for being tardy to the gathering but I'd like to share my thoughts now

let fresh_arr = [
  (info)=>{console.log(info)},
  (info)=>{console.log(info+1)},
  (info)=>{console.log(info+2)}
]
fresh_arr[0]