Turn array element into a function call

Question

This is either a dumb question or one without an answer

I want to call a function by using an element in an array as a way to match the function name. The elements of the array are, and may need to remain string.

i.e

   $(document).on('click', 'a', function() {
      var classes = $(this).attr('class'); 
      var classesArr = classes.split(' ');
      
      arr[1]();
   });

   function two() { console.log('hello'); }

   <a href="foo" class="one two three"></a>

obviously this doesn't work, and I get "arr[1] is not a function". But is there a trick?

The question has no relation to jQuery. I removed the tag accordingly. — Carsten Massmann, Oct 23 '22 at 07:27
Does this answer your question? [How to execute a JavaScript function when I have its name as a string](https://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string) — pilchard, Oct 23 '22 at 10:56
How you store/access the string doesn't change the fact that this is a duplicate. — pilchard, Oct 23 '22 at 10:57

flyingfox · Accepted Answer · 2022-10-23T06:47:06.860

2

You can use eval() to do it

var arr = ['one', 'two', 'three'];
eval(arr[1]+'()');

function two() { console.log('hello'); }

Or using window

var arr = ['one', 'two', 'three'];
window[arr[1]]();

function two() { console.log('hello'); }

edited Oct 23 '22 at 06:47

answered Oct 23 '22 at 06:38

flyingfox

13,414
3
24
39

I thought eval() was to be avoided? I found this as an answer but so many people seemed to say to avoid eval() at all costs as it can be used maliciously. Just curious – Justin Riley Oct 23 '22 at 06:43
@Then you might be using `windows`,see [use-dynamic-variable-names-in-javascript](https://stackoverflow.com/questions/5117127/use-dynamic-variable-names-in-javascript) – flyingfox Oct 23 '22 at 06:47
do you personally agree that using eval() is a poor idea? – Justin Riley Oct 23 '22 at 06:51
@JustinRiley It depends on how you using it,there is not absoultely answer for `eval` is ppor or not – flyingfox Oct 23 '22 at 07:27

score 2 · Answer 2 · answered Oct 23 '22 at 07:24

2

Put the function references into the array - instead of their names as strings.

const arr = [one, two, three];
arr[1]();

function one() {console.log('hello one'); }
function two() {console.log('hello, this is two!'); }
function three() {console.log('hello three'); }

answered Oct 23 '22 at 07:24

Carsten Massmann

26,510
2
22
43

The array elements are string because the source of the array is a string. Like so: ```var classes = $(this).attr('class'); var classesArr = classes.split(' ');``` The value of 'class' on link elements are string, e.g 'nav content sub_nav'. Hence the 'jquery' tag – Justin Riley Oct 23 '22 at 20:29

score 0 · Answer 3 · answered Oct 23 '22 at 09:34

You can use a functions Object and declare functions from that. Global functions are always a property of window (the global scope in a browser), so you can refer to them using window[functionName]

const functions = {
  one: _ => console.log(`function one`),
  two: _ => console.log(`function two`),
  three: _ => console.log(`function three`)
};

const [one, two, three] = Object.values(functions);
// call 'one'
one();

// or (not advisable) as global (so: window) properties
const names = [`winOne`, `winTwo`, `winThree`];
const [win1, win2, win3] = names.map(n => window[n]);

// call 'win3'
win3();

function winOne() { console.log(`function winOne`); }
function winTwo() { console.log(`function winTwo`); }
function winThree() { console.log(`function winThree`); }

Turn array element into a function call

3 Answers3