Map of functions in javascript?

Question

I have a context menu that will trigger different javascript functions. The naive solution for choosing function looks like this:

function(action, el, pos) {
    switch(action)
    {
        case "export_selected_to_excel":
            exportSelectedToExcel(el);
            break;

        etc..
    }
}

I would like to have a map of functions instead, so that I can reduce the metod to something similar to this:

function(action, el, pos) {
    menuAction[action](el);
}

I define the array like this:

function exportSelectedToExcel(id){
   //stuff...
}

var menuAction = new Array();
menuAction["export_selected_to_excel"] = exportSelectedToExcel;

This seems to work fine and feels like a reasonable solution.

Are there any downsides to do like this in javascript?
Is there even better ways to do it?

score 6 · Accepted Answer · answered Sep 12 '11 at 10:29

Your idea is good, but you should not use Arrays as associative maps, because they are not associative (see e.g. Mastering Javascript Arrays). When you do var a = []; a["x"] = y you assign in fact the property x to the object a. So, it holds true afterwards: a.length == 0 and a.x == y.

You should just replace Array by object to get an associative map:

var menuAction = {};
menuAction["export_selected_to_excel"] = exportSelectedToExcel;
// or
menuAction.export_selected_to_excel = exportSelectedToExcel;
// or
menuAction.export_selected_to_excel = function(id) {...};

or:

var menuAction = {
    export_selected_to_excel: exportSelectedToExcel,
    export_x: exportX   // etc
}

jeffreydev · Answer 2 · 2011-09-12T12:03:46.883

2

if you do it like that the function will point to another function and thus create some overhead, you can also define the function directly inside of the object, so for example:

var menuAction = {};
menuAction.export_selected_to_excel = function (id) {
    // stuff
}

and to make sure a function exists you can do:

var action = 'export_selected_to_excel';
if(typeof menuAction[action] == 'function')
{
    // call function
}

edited Sep 12 '11 at 12:03

answered Sep 12 '11 at 09:38

jeffreydev

1,722
13
31

Is the definition copied literally or is it a reference to the function the way I did it? – Carl R Sep 12 '11 at 09:42
1

It is perfectly legal, and I'm using same logic in my code. No function will not "exist twice", you only have function and "pointer" to it. – Martin Gamulin Sep 12 '11 at 09:46

score 1 · Answer 3 · edited May 23 '17 at 11:45

1

if it is really the case that the names of the functions can be directly derived from the strings, eg,

export_selected_to_excel   => exportSelectedToExcel
compute_selected           => computeSelected
...

...then rather than using an associative array, you could dynamically generate the fn names and invoke them dynamically.

Use the answer to this question ( Convert hyphens to camel case (camelCase) ) to convert names.

Then, use the answer to this question ( How to execute a JavaScript function when I have its name as a string ) to invoke the function. Be sure to verify that window[functionName] is an actual function, with a typeof test.

edited May 23 '17 at 11:45

Community

1
1

answered Sep 12 '11 at 10:13

Cheeso

189,189
101
473
713

Actually, I can name both the strings and functions to anything. Cool solution, but the overhead seems kind of unneccesary. I like it, but I'm not convinced it's worth it. – Carl R Sep 12 '11 at 10:20
1

@Cheeso: I think this is unneccesary inefficient, if you know the functions in advance. – Jiri Kriz Sep 12 '11 at 10:31

score 0 · Answer 4 · answered Sep 12 '11 at 09:45

I don't think there are big downsides. Indeed what you're trying to do is similar at what you do when you define an object and inside declare your functions.

e.g.:

var menuAction = {
    function action1(el) {
       // ...
    },
    function action2(el) {
       //...
    },

    // ...       
}

The only dfference is that in this case you're defining you're functions not in the object declaration but a-posteriori using the Associative Array notation.

Map of functions in javascript?

4 Answers4