Javascript: Defining a map of functions

Question

$("#searchType").on('change', function () {
    var selectionAction = {
        All: loadAll(),
        Competitions: loadAll("competitions"),
        Clubs: loadAll("clubs"),
        Teams: loadAll("teams")
    };
    var selection = $("#searchType").find('option:selected').val();
    selectionAction[selection]
});

See the above code. The idea is that when selection equals one of the properties in my object, then the corresponding function will be called.

e.g. when selection equals Competitions then we would invoke loadAll("competitions") function.

Instead what I am finding is that when it enters the onChange function that it invokes all functions.

What am I doing wrong here?

Whenever you have () after a function reference, the function gets called. All: loadAll(), calls the function loadAll and assigns the return value to the property All. — Felix Kling
– Felix Kling, Commented Oct 28, 2014 at 23:49

Travis J · Accepted Answer · 2014-10-28 23:52:58Z

5

Use anonymous functions to make the call. Currently you are storing the result of the function call which is undefined

var selectionAction = {
    All: function(){loadAll()},
    Competitions: function(){loadAll("competitions")},
    Clubs: function(){loadAll("clubs")},
    Teams: function(){loadAll("teams")}
};
var selection = $("#searchType").find('option:selected').val();
selectionAction[selection]();// make sure to call the anonymous function

Or, if you prefer brevity,

$("#searchType").on('change', function () {
 loadAll($("#searchType").find('option:selected').val().replace("All","").toLowerCase())
});

edited Oct 28, 2014 at 23:52

answered Oct 28, 2014 at 23:39

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

2 Comments

dandavis Over a year ago

you can use bind() instead of anons for all these. nothing wrong here, just saying...

Travis J Over a year ago

@dandavis - yup, I had considered that as well as an option. It is a preference to be sure, I tend to not use bind when I am not taking advantage of the this context.

istos · Accepted Answer · 2014-10-28 23:46:12Z

2

When you specify loadAll(), loadAll("competitions"), loadAll("clubs") and so on you are actually executing the function immediately. What you want to do is have your object have properties of non-function calls like so:

 var selectionAction = {
    All: '',
    Competitions: 'competitions',
    Clubs: 'clubs',
    Teams: 'teams'
  };

And then do:

var selection = $("#searchType").find('option:selected').val();
loadAll(selectionAction[selection]);

And make sure your loadAll function checks for existence of its 1st argument.

answered Oct 28, 2014 at 23:46

istos

2,6821 gold badge19 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript: Defining a map of functions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related