Introduction
JavaScript is a versatile and highly effective language, offering quite a lot of methods to do absolutely anything, like invoking capabilities. One of many extra fascinating and lesser-known strategies is invoking a perform whenever you solely have its identify as a string.
This Byte will take you thru the method of invoking JavaScript capabilities from string names, and why you would possibly wish to achieve this.
JavaScript Operate Invocation
Earlier than we get into the main points of invoking capabilities from string names, let’s check out learn how to invoke fundamental JavaScript capabilities. In JS, capabilities are invoked by appending parentheses () to the perform identify. This may be completed immediately, as in myFunction(), or not directly, as in myObject.myMethod().
perform sayHello() {
console.log("Hi there, world!");
}
sayHello(); // Outputs: Hi there, world!
Why Invoke Features from String Names?
When you do not have already got a well-thought-out situation for doing this, you surprise why we would wish to do it in any respect. Properly, there are just a few eventualities the place this may be helpful.
As an illustration, you is perhaps working with an API that returns a string indicating which perform must be executed, like a distant process name (RPC). Or, you perhaps you are growing a plugin system the place plugins register their capabilities by identify, and it is advisable to name these capabilities dynamically.
In these circumstances, having the ability to invoke a perform from its string identify is usually a highly effective software in your app.
Primary Methodology: Utilizing the Window Object
Essentially the most fundamental approach to invoke a perform from a string identify in JavaScript is to make use of the window object. In a browser surroundings, all world JavaScript capabilities turn into strategies of the window object. So, you may entry these capabilities as properties of window utilizing bracket notation.
Here is a easy instance:
perform greet() {
console.log("Hi there, world!");
}
var functionName = "greet";
window[functionName](); // Outputs: Hi there, world!
On this code, we’re defining a perform greet, then storing its identify as a string within the variable functionName. We then use bracket notation to entry this perform as a property of window and invoke it.
Observe: This methodology solely works for world capabilities in a browser surroundings. It will not work for native capabilities or in non-browser environments like Node.js.
Superior Methodology: Utilizing JavaScript’s eval() Operate
A extra superior (and controversial) methodology for invoking a perform from a string identify is to make use of JavaScript’s eval() perform. The eval() perform takes a string of JavaScript code and executes it. This implies you may assemble a string representing the perform name you wish to make, and eval() will execute it.
Here is the way you would possibly do that:
perform greet() {
console.log("Hi there, world!");
}
var functionName = "greet";
eval(functionName + "()"); // Outputs: Hi there, world!
On this instance, we’re concatenating the string "()" to the perform identify and passing the ensuing string to eval(). This causes eval() to execute the perform name as if it have been a line of JavaScript code.
Observe: Use eval() with warning! As a result of it executes arbitrary JavaScript code, it could actually pose severe safety dangers if misused. All the time validate and sanitize any enter that you simply cross to eval().
Various Methodology: Utilizing the Operate Constructor
One other approach to execute a perform from a string identify in JavaScript is by utilizing the Operate constructor. This methodology is a little more superior, but it surely gives lots of flexibility.
Here is the way it works:
let functionName = "sayHello";
let functionArguments = ["John"];
let functionBody = 'console.log("Hi there, " + identify + "!");';
let func = new Operate('identify', functionBody);
func.apply(null, functionArguments);
Within the above instance, we create a brand new perform with the Operate constructor. The constructor takes a variable variety of arguments. The final argument is the perform physique as a string, and the previous arguments are the names of the arguments for the perform.
After creating the perform, we are able to name it utilizing the apply() methodology, passing the arguments as an array.
Wait! Utilizing new Operate like this to name code from a string is harmful. It opens up your software to all types of potential safety points. You need to solely use this methodology as a really final resort.
Executing Namespace Features
Generally, capabilities usually are not world however are nested inside objects or “namespaces”. In such circumstances, we are able to nonetheless execute them by accessing the item properties.
Take into account the next instance:
let myNamespace = {
myFunction: perform(identify) {
console.log('Hi there, ' + identify + '!');
}
};
let functionName = "myFunction";
let functionArguments = ["John"];
myNamespace[functionName].apply(myNamespace, functionArguments);
On this instance, myFunction is a property of the myNamespace object. We are able to entry it utilizing bracket notation after which name it with the apply() methodology.
However what if the perform identify was laid out in dot notation? To make this work, you’d want to separate the item/perform names by the intervals and entry every object earlier than calling the perform. This may be achieved with a perform like this:
let myNamespace = {
capabilities: {
howdy: perform(identify) {
console.log('Hi there, ' + identify + '!');
}
}
};
let functionName = "capabilities.howdy";
let context = myNamespace;
let namespaces = functionName.cut up(".");
let func = namespaces.pop();
for (let i = 0; i < namespaces.size; i++) {
context = context[namespaces[i]];
}
return context[func].apply(context, args);
Utilizing this, we are able to execute capabilities of arbitrary namespace depth.
Safety Concerns
Whereas these strategies might be fairly helpful, it is necessary to keep in mind that executing code from a string is usually a safety danger. That is very true when utilizing the eval() perform or the Operate constructor, as they are going to execute any JavaScript code. When you’re coping with person enter, this will result in code injection assaults.
Observe: All the time validate and sanitize person enter earlier than utilizing it in your code. Keep away from executing code from strings each time doable.
Conclusion
On this Byte, we have confirmed just a few totally different strategies of executing a JavaScript perform when you may have its identify as a string. We have seen learn how to use the window object, the Operate constructor, and even learn how to execute capabilities inside namespaces. Whereas these methods might be helpful, it is necessary to make use of them responsibly to keep away from potential safety dangers.
