Javascript function array

Question

I am wondering how to make an array with functions and then randomizing one and call it. Here is an example of what I have tested.

functions = [f1(), f2(), f3(), f4()];
rand = functions[Math.floor(Math.random() * functions.length)];

$('p').click(function() {
  rand[0]();
}

I have searched and tried multiple supposed solutions but none of them worked(including this one: Javascript Array of Functions).

Arun P Johny · Answer 1 · 2015-03-03T08:30:04.127

5

Create the array using function references, and then use the random key generation in the click handler

function log(func) {
  $('#x').html(func)
}

function f1() {
  log('f1')
}

function f2() {
  log('f2')
}

function f3() {
  log('f3')
}

function f4() {
  log('f4')
}

functions = [f1, f2, f3, f4];

$('p').click(function() {
  var rand = functions[Math.floor(Math.random() * functions.length)];
  rand();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="x"></div>
<p>Click</p>

edited Mar 03 '15 at 08:30

answered Mar 03 '15 at 08:26

Arun P Johny

384,651
66
527
531

May I ask what the point of the log function and x div is? Tried it without them and it works great. Thanks btw. – ItsNotAbyss Mar 03 '15 at 09:28
@ItsNotAbyss that was just to demonstrate that the functions are getting called... like when `f1` is called the div's text is changed to f1 etc – Arun P Johny Mar 03 '15 at 09:30

score 0 · Answer 2 · answered Mar 03 '15 at 08:52

By adding a () after the function names( f1() ), you are effectively executing the function. You must pass a reference of the function to the array so that you can invoke it later. So,
```
functions = [f1(), f2(), f3(), f4()];
```
becomes
```
functions = [f1, f2, f3, f4];
```
You seem to be calculating rand only once, because it is not placed in the click event. Include this,
```
rand = functions[Math.floor(Math.random() * functions.length)];
```
in your event handler.
rand is not an array. It contains a reference of one function, which can be invoked by calling it, like this :
```
rand();
```

Your full code, along with some additions has been fiddled here : http://jsfiddle.net/sq623mrc/

Javascript function array

2 Answers2