Dynamically call a Function in JavaScript

Have you ever had a scenario where you needed to call a function based on a variable?

In my most recent use case, I had an area of dynamic modules and needed to loop over them. Then, if I found one with the right values, I needed to call the function dynamically.

So how does a dynamic function call work?

JS function definition permalink

First, let’s start with the code for our JS functions:

function customClick(button) {
  button.addEventListener('click', function (event) {
    alert('custom click');
  });
}

function customUppercase(input) {
  input.addEventListener('keyup', function () {
    input.value = input.value.toUpperCase();
  });
}

Not very exciting functions, but good enough to test with.

For this example, we are going to use the following HTML:

<input type="text" data-module="customUppercase" /> <br /><br />
<button type="submit" data-module="customClick">Done</button>

Dynamically call a Function in JavaScript permalink

Let’s start by defining our array of custom objects:

const options = ['Click', 'Uppercase'];

We will now loop over these:

for (let i = 0; i < options.length; i++) {
  console.log(options[i]);
}

Within the modules, we need to get all types that have the data-module we are passing:

for (let i = 0; i < options.length; i++) {
  const items = document.querySelectorAll(
    '[data-module="custom' + options[i] + '"]'
  );
  for (let j = 0; j < items.length; j++) {
    // Call function
  }
}

Now, we need to call the function dynamically based on our variable:

for (let i = 0; i < options.length; i++) {
  const items = document.querySelectorAll(
    '[data-module="custom' + options[i] + '"]'
  );
  for (let j = 0; j < items.length; j++) {
    this['custom' + options[i]](items[j]);
  }
}

That’s how to dynamically call JS functions based on the value in another variable!

Try the code example in this Codepen permalink

See the Pen Vanilla JavaScript Dynamically Calling a Function by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter