Dynamic Calls In JavaScript

Dynamic calls in coding can be very useful and it can make your code more DRY and cleaner. What and how can we dynamically make calls in JavaScript? I’m glad you asked and the answer is we can almost dynamically call anything we need like functions, methods, objects and so on simply by calling them using their name as a string. So let’s see the different technics allowing to do that.

Dynamically Calling JavaScript Functions

// Our function
function myFunction(){
	console.log("Function called.");
}

// Declare the name of the function as a string
var functionName = "myFunction";

// Call the function using 'functionName' variable string value
// This is the equivalent of myFunction();
window[functionName]();

This will output in your console: Function called.

Note: using the window object is not recommended as it moves away from a more modular contained approach, which JavaScript does well with its closures and functional nature.

Dynamically Calling JavaScript Object Methods

// Our object with some methods
var actions = {
	doSomething: function(){
		console.log("Doing something.");
	},
	doSomethingElse: function(){
		console.log("Doing something else.");
	}
};

var objectMethodName = "doSomethingElse";
actions[objectMethodName]();

Here we’re going to get: Doing something else.

Dynamically Calling JavaScript Methods

<div id="demo"></div>

<script>
// We want to call the 'innerHTML' method
var functionName3 = "innerHTML";
document.getElementById("demo")[functionName3] = "Hello world!";
</script>

The text Hello world! will be inserted into the div tag.

Other Dynamic Calls

Using the same logic we also can call variables and arrays.

var hey = "Hey coders!";
var hi  = "Hi coders!";
console.log(window['hi']);
// Will output: Hi coders!

var myArray = ["It's awesome!", "It's great!"];
console.log(window['myArray'][0]);
// Will output: It's awesome!

This is pure JavaScript so no need for libraries to make this work but guess what it works the same way with JQuery for example. Let’s see a simple example with JQuery methods just to show how it could be used.

In this example we want to show an element if it’s hidden or hide it if displayed. We will use slideUp & slideDown JQuery methods. We are also going to use concatenation to make the code as short as possible.

<div id="myElement" style="display:none">Some content</div>

<script>
// We store element object
var element    = $("#myElement");
// Get element display state. Here it'll be "none"
var visibility = element.css("display");
// Make an IF condition to get "Down" or "Up"
// depending on 'visibility' value
var action     = (visibility == "none" ? "Down" : "Up");

// In this case it will show as: action = "Down";
element["slide" + action](500);
// This would be the equivalent of:
// element.slideDown(500);
</script>

Hope you found this useful and don’t forget to subscribe to my newsletter and follow me on Twitter.