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
– Carsten Massmann, Commented Oct 23, 2022 at 7:27
Does this answer your question? How to execute a JavaScript function when I have its name as a string — pilchard
– pilchard, Commented Oct 23, 2022 at 10:56
How you store/access the string doesn't change the fact that this is a duplicate. — pilchard
– pilchard, Commented Oct 23, 2022 at 10:57

flyingfox · Accepted Answer · 2022-10-23 06:47:06Z

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, 2022 at 6:47

answered Oct 23, 2022 at 6:38

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Justin Over a year ago

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

flyingfox Over a year ago

@Then you might be using windows,see use-dynamic-variable-names-in-javascript

Justin Over a year ago

do you personally agree that using eval() is a poor idea?

flyingfox Over a year ago

@JustinRiley It depends on how you using it,there is not absoultely answer for eval is ppor or not

Carsten Massmann · Accepted Answer · 2022-10-23 07:24:22Z

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, 2022 at 7:24

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

1 Comment

Justin Over a year ago

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

KooiInc · Accepted Answer · 2022-10-23 09:34:56Z

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

Collectives™ on Stack Overflow

Turn array element into a function call

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Related