CODEWITHSUNDEEP
javascriptarraysfunction
Nick
Nick

Reputation: 1637

Javascript Array of Functions

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

array_of_functions[0];

That does not work as intended because each function in the array is executed when the array is created.

What is the proper way of executing any function in the array by doing:

array_of_functions[0];  // or, array_of_functions[1] etc.

Thanks!

Upvotes: 161

Views: 276360

Answers (22)

JellyFox
JellyFox

Reputation: 35

I know I am late to the party but here is my opinion

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

Upvotes: 0

Joshua Dance
Joshua Dance

Reputation: 10482

This answered helped me but I got stuck trying to call each function in my array a few times. So for rookies, here is how to make an array of functions and call one or all of them, a couple different ways.

First we make the array.

let functionsArray = [functionOne, functionTwo, functionThree];

We can call a specific function in the array by using its index in the array (remember 0 is the first function in the array).

functionsArray[0]();

We have to put the parenthesis after because otherwise we are just referencing the function, not calling it.

If you wanted to call all the functions we could use a couple different ways.

For loop

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

Don't forget the parenthesis to actually call the function.

ForEach ForEach is nice because we don't have to worry about the index, we just get handed each element in the array which we can use. We use it like this (non arrow function example below):

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

In a ForEach you can rename element in the above to be whatever you want. Renaming it, and not using arrow functions could look like this:

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

What about Map? We shouldn't use Map in this case, since map builds a new array, and using map when we aren't using the returned array is an anti-pattern (bad practice).

We shouldn't be using map if we are not using the array it returns, and/or we are not returning a value from the callback. Source

Upvotes: 1

Hopkroft
Hopkroft

Reputation: 31

Maybe it can helps to someone.

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         window.manager = {
             curHandler: 0,
             handlers  : []
         };
         
         manager.run = function (n) {
             this.handlers[this.curHandler](n);
         };
         
         manager.changeHandler = function (n) {
             if (n >= this.handlers.length || n < 0) {
                 throw new Error('n must be from 0 to ' + (this.handlers.length - 1), n);
             }
             this.curHandler = n;
         };
         
         var a = function (n) {
             console.log("Handler a. Argument value is " + n);
         };
         
         var b = function (n) {
             console.log("Handler b. Argument value is " + n);
         };
         
         var c = function foo(n) {
             for (var i=0; i<n; i++) {
                 console.log(i);
             }
         };
         
         manager.handlers.push(a);
         manager.handlers.push(b);
         manager.handlers.push(c);
      </script>
   </head>
   <body>
      <input type="button" onclick="window.manager.run(2)" value="Run handler with parameter 2">
      <input type="button" onclick="window.manager.run(4)" value="Run 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="manager.changeHandler(document.getElementById('item1').value);" value="Change handler">
      </div>
      </p>
   </body>
</html>

Upvotes: 0

Richard O&#39;Brien
Richard O&#39;Brien

Reputation: 1

maybe something like this would do the trick:

[f1,f2,f3].map((f) => f('a string'))

Upvotes: 0

Steve Bauman
Steve Bauman

Reputation: 8678

Using ES6 syntax, if you need a "pipeline" like process where you pass the same object through a series of functions (in my case, a HTML abstract syntax tree), you can use for...of to call each pipe function in a given 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) => {
        // Using a dynamic closure.
    },
]

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

Upvotes: 1

Daniel Tok
Daniel Tok

Reputation: 217

Ah man there are so many weird answers...

const execute = (fn) => fn()
const arrayOfFunctions = [fn1, fn2, fn3]

const results = arrayOfFunctions.map(execute)

or if you want to sequentially feed each functions result to the next:
compose(fn3, fn2, fn1)

compose is not supported by default, but there are libraries like ramda, lodash, or even redux which provide this tool

Upvotes: 2

Nezumi
Nezumi

Reputation: 11

I have many problems trying to solve this one... tried the obvious, but did not work. It just append an empty function somehow.

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

I solved it by using an array of strings, and later with eval:

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

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

Upvotes: 0

Mensur Grišević
Mensur Grišević

Reputation: 593

It's basically the same as Darin Dimitrov's but it shows how you could use it do dynamically create and store functions and arguments. I hope it's useful for you :)

var argsContainer = ['hello', 'you', 'there'];
var functionsContainer = [];

for (var i = 0; i < argsContainer.length; i++) {
var currentArg = argsContainer[i]; 

  functionsContainer.push(function(currentArg){
    console.log(currentArg);
  });
};

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

Upvotes: 7

mlhazan
mlhazan

Reputation: 1286

up above we saw some with iteration. Let's do the same thing using forEach:

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

funcs.forEach(function (func) {
  func(); // outputs  1, then 2
});
//for (i = 0; i < funcs.length; i++) funcs[i]();

Upvotes: 5

Thomas Gotwig
Thomas Gotwig

Reputation: 4449

Execution of many functions through an ES6 callback 🤗

const f = (funs) => {
  funs().forEach((fun) => fun)
}

f(() => [
  console.log(1),
  console.log(2),
  console.log(3)
])

Upvotes: 2

pallimula stackoverflow
pallimula stackoverflow

Reputation: 1

you got some top answers above. This is just another version of that.

var dictFun = {
     FunOne: function(string) {
     console.log("first function");
  },

   FuncTwo: function(string) {
   console.log("second function");
 },

  FuncThree: function(string) {
   console.log("third function");
}

}

Upvotes: -1

YakuZa
YakuZa

Reputation: 526

Using 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')
    ]

Upvotes: 0

Quetzal
Quetzal

Reputation: 1

the probleme of these array of function are not in the "array form" but in the way these functions are called... then... try this.. with a simple eval()...

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] ); }

it work's here, where nothing upper was doing the job at home... hopes it will help

Upvotes: 0

Danyal Aytekin
Danyal Aytekin

Reputation: 4215

A short way to run 'em all:

[first_function, ..., nth_function].forEach (function(f) {
    f('a string');
});

Upvotes: 0

Daniel Lizik
Daniel Lizik

Reputation: 3144

If you're doing something like trying to dynamically pass callbacks you could pass a single object as an argument. This gives you much greater control over which functions you want to you execute with any parameter.

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

function func_two(arg) {
    console.log(arg+' make this different')
};

var obj = {
    callbacks: [func_one, func_two],
    params: ["something", "something else"];
};

function doSomething(obj) {
    var n = obj.counter
    for (n; n < (obj.callbacks.length - obj.len); n++) {
        obj.callbacks[n](obj.params[n]);
    }
};

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

//something
//something else make this different

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

//something else make this different

Upvotes: 2

pjcabrera
pjcabrera

Reputation: 1468

I think this is what the original poster meant to accomplish:

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

for (i = 0; i < array_of_functions.length; i++) {
    array_of_functions[i]();
}

Hopefully this will help others (like me 20 minutes ago :-) looking for any hint about how to call JS functions in an array.

Upvotes: 133

user37057
user37057

Reputation: 69

/* PlanetGreeter */

class PlanetGreeter {
    hello   : { () : void; } [] = [];
    planet_1 : string = "World";
    planet_2 : string = "Mars";
    planet_3 : string = "Venus";
    planet_4 : string = "Uranus";
    planet_5 : string = "Pluto";
    constructor() {
        this.hello.push( () => { this.greet(this.planet_1); } );
        this.hello.push( () => { this.greet(this.planet_2); } );
        this.hello.push( () => { this.greet(this.planet_3); } );
        this.hello.push( () => { this.greet(this.planet_4); } );
        this.hello.push( () => { this.greet(this.planet_5); } );
    } 
    greet(a: string) : void { alert("Hello " + a); }
    greetRandomPlanet() : void { 
        this.hello [ Math.floor( 5 * Math.random() ) ] (); 
    } 
} 
new PlanetGreeter().greetRandomPlanet();

Upvotes: -4

Gus
Gus

Reputation: 7525

I would complement this thread by posting an easier way to execute various functions within an Array using the shift() Javascript method originally described here

  var a = function(){ console.log("this is function: a") }
  var b = function(){ console.log("this is function: b") }
  var c = function(){ console.log("this is function: c") }

  var foo = [a,b,c];

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

Upvotes: 19

Jeff
Jeff

Reputation: 4146

Without more detail of what you are trying to accomplish, we are kinda guessing. But you might be able to get away with using object notation to do something like this...

var myFuncs = {
  firstFunc: function(string) {
    // do something
  },

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}

and to call one of them...

myFuncs.firstFunc('a string')

Upvotes: 29

Leonardo Ciaccio
Leonardo Ciaccio

Reputation: 3126

This is correct

var array_of_functions = {
            "all": function(flag) { 
                console.log(1+flag); 
              },
                "cic": function(flag) { 
                console.log(13+flag); 
              }                     
        };

array_of_functions.all(27);
array_of_functions.cic(7);

Upvotes: 1

Robin
Robin

Reputation: 21884

Or just:

var myFuncs = {
  firstFun: function(string) {
    // do something
  },

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}

Upvotes: 16

Darin Dimitrov
Darin Dimitrov

Reputation: 1038840

var array_of_functions = [
    first_function,
    second_function,
    third_function,
    forth_function
]

and then when you want to execute a given function in the array:

array_of_functions[0]('a string');

Upvotes: 280

Related Questions