is there a good way to call methods dynamically in js?

Question

I have 2 js functions:

function onRegionMouseOver()
{
}

function onRegionMouseOut()
{
}

Is it possible to call these js functions dynamically doing something like this?:

var type = 'Out'
//the following line would exec onRegionMouseOut() above:
call(onRegionMouse[type]())

Sharikov Vladislav · Accepted Answer · 2017-05-11 23:09:04Z

4

You can use this:

var onRegionMouseHandlers = {
  out: function () {},
  in: function () {}
}

// and using like this
var whatToUse = 'in';
// use
onRegionMouseHandlers[whatToUse]()

Also, you can remove your which choose what function have to be called. You can just add two handlers to two different events.

edited May 11, 2017 at 23:09

answered May 11, 2017 at 22:54

Sharikov Vladislav

7,2999 gold badges53 silver badges93 bronze badges

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

Comments

guest271314 · Accepted Answer · 2017-05-11 23:27:58Z

2

You can define the functions as properties of an object, use bracket notation to call the function.

const methods = {
  onRegionMouseOver() {console.log("Over")},
  onRegionMouseOut() {console.log("Out")}
}

let fn = "onRegionMouse";

let type = "Out";

methods[`${fn}${type}`]();

type = "Over";

methods[`${fn}${type}`]();

without template literal or let

var methods = {
  onRegionMouseOver: function onRegionMouseOver() {console.log("Over")},
  onRegionMouseOut: function onRegionMouseOu() {console.log("Out")}
}

var fn = "onRegionMouse";

var type = "Out";

methods[fn + type]();

type = "Over";

methods[fn + type]();

edited May 11, 2017 at 23:27

answered May 11, 2017 at 22:54

guest271314

1

8 Comments

Sharikov Vladislav Over a year ago

Note that this string definition notation (template literals? don't know how to name this correctly) will work only on a few modern browsers. Or you need transpile this code. Same for let keyword

Sharikov Vladislav Over a year ago

I think it will be nice if you will mention why you give 2 variants: modern and not-modern.

guest271314 Over a year ago

@SharikovVladislav Not certain if "modern" is the appropriate description of possible variants at Answer, or why two variants are provided at Answer. Rather, 1) access to FOSS browser; 2) consistently updating to newest version of FOSS browser. Where the above might not be possible at 1); or user simply not performing consistent updates at 2).

Bergi Over a year ago

You really should use just fn+type instead of string interpolation or concat.

Bergi Over a year ago

@guest271314 No idea. I'd check caniuse and kangax' compat table.

|

Pevara · Accepted Answer · 2017-05-11 22:55:43Z

0

You can do something like that, provided you declare an object that contains the functions.

var onRegionMouse = {
   Out: onRegionMouseOut,
   Over: onRegionMouseOver
};

Now you can just do

var type = 'Out';
onRegionMouse[type]();

answered May 11, 2017 at 22:55

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

Comments

Ahmed · Accepted Answer · 2017-05-11 22:58:20Z

0

what about:

var myFunctions = {
   out: function onMouseOut()...,
   enter: function onMouseEnter()...
}

You can call it now with myFunctions[ "out" ] ()

edited May 11, 2017 at 22:58

answered May 11, 2017 at 22:57

Ahmed

337 bronze badges

2 Comments

DarthJDG Over a year ago

There were already 3 similar answers, 2 of them identical to yours.

Ahmed Over a year ago

Oups, when I answered the question has no answers

Collectives™ on Stack Overflow

is there a good way to call methods dynamically in js?

4 Answers 4

Comments

8 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related