As Triptych points out, you can call any global scope function by finding it in the host object's contents.
A cleaner method, which pollutes the global namespace much less, is to explicitly put the functions into an array directly like so:
var dyn_functions = [];
dyn_functions['populate_Colours'] = function [arg1, arg2] {
// function body
};
dyn_functions['populate_Shapes'] = function [arg1, arg2] {
// function body
};
// calling one of the functions
var result = dyn_functions['populate_Shapes'][1, 2];
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes[1, 2];
This array could also be a property of some object other than the global host object too meaning that you can effectively create your own namespace as many JS libraries such as jQuery do. This is useful for reducing conflicts if/when you include multiple separate utility libraries in the same page, and [other parts of your design permitting] can make it easier to reuse the code in other pages.
You could also use an object like so, which you might find cleaner:
var dyn_functions = {};
dyn_functions.populate_Colours = function [arg1, arg2] {
// function body
};
dyn_functions['populate_Shapes'] = function [arg1, arg2] {
// function body
};
// calling one of the functions
var result = dyn_functions.populate_Shapes[1, 2];
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'][1, 2];
Note that with either an array or an object, you can use either method of setting or accessing the functions, and can of course store other objects in there too. You can further reduce the syntax of either method for content that isn't that dynamic by using JS literal notation like so:
var dyn_functions = {
populate_Colours:function [arg1, arg2] {
// function body
};
, populate_Shapes:function [arg1, arg2] {
// function body
};
};
Edit: of course for larger blocks of functionality you can expand the above to the very common "module pattern" which is a popular way to encapsulate code features in an organised manner.
Sometimes you need to call a Javascript function but only know which one will be called at runtime. So you cannot directly call the function in you code but need to some get a function in a variable and be able to use it to call the appropriate function. Of course a simple solution is to use a if-then-else [or a switch] e.g.: The problem is that you need to keep changing the call_others function
every time you add a new function which can be called. And in my case I do not even know which functions are all available. I can compute the name of the function but do not know which functions are available.function func_abc[] {
alert["abc"];
}
function call_others[function_name] {
if [function_name == "abc"] {
func_abc[];
}
}
call_others["abc"];
So what I need is to execute a function with dynamically computed function name. One candidate for this is the eval function. Here the definition of the eval function at w3schools:
Syntax: eval[string]
Parameter Values:
| string | A JavaScript expression, variable, statement, or sequence of statements |
You can use it this way:
function func_abc[] {
alert["abc"];
}
function call_others[function_name] {
eval["func_"+function_name+"[]"];
}
call_others["abc"];This works pretty well. But even though the eval function can be very useful in some cases, if you can do without it, you should. And in this case there is an alternative.
The alternative is to go through the window object. In JavaScript everything that is defined in the global scope is defined as a property of the global window object. So the func_abc function defined about is defined as window.func_abc. Also in JavaScript properties of objects can be accessed using an associative array syntax e.g. window.abc and window[“abc”] are equivalent. So you can access func_abc using window[“func_abc”].
So you can implement call_others like this:
function call_others[function_name] {
window["func_"+function_name][];
}Note that if your functions are not global functions but functions of an object you can also use a similar solution e.g.:
function MyClass[] {
this.abc = function[] {
alert["abc"];
}
}
var myObject = new MyClass[];
myObject["abc"][];If what you want to do is not only dynamically call a function but also dynamically create a named function, it is also best done with the window object using either:
window['name'] = function[] { ... }or:
window['name'] = new Function['...']