Subscribe

Dynamically call a Function in JavaScript

โœ๏ธ

Todays guide we will learn how to dynamically call a function in Vanilla JavaScript. See the code examples in the Codepen!

18 Jul, 2020 ยท 2 min read

Have you ever had the 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

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

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

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

Thank you for reading, and let's connect!

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

JavaScript sending data between windows

9 Sep, 2022 ยท 4 min read

JavaScript sending data between windows

Using the native payment request JavaScript API

9 Aug, 2022 ยท 8 min read

Using the native payment request JavaScript API

Join 1829 devs and subscribe to my newsletter