DEV Community

loading...
Cover image for How to execute an array of functions in JavaScript?

How to execute an array of functions in JavaScript?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・2 min read

Originally posted here!

To execute an array of functions, we can use a for loop or the forEach() array method in JavaScript.

TL;DR

// Functions to execute
function greetPeople() {
  console.log("Hello People!");
}

function sayFirstname() {
  console.log("My First name is Roy");
}

function sayLastname() {
  console.log("My First name is Daniel");
}

// save the functions
// references in an array
const funcsArr = [greetPeople, sayFirstname, sayLastname];

// Loop through each array elements (functions references)
// and invoke the functions
for (let i = 0; i < funcsArr.length; i++) {
  // get the current function getting looped
  const func = funcsArr[i];

  // call the function
  func();
}
Enter fullscreen mode Exit fullscreen mode

For example let's say we have some functions like greetPeople(), sayFirstname() and sayLastname() like this,

// Functions to execute
function greetPeople() {
  console.log("Hello People!");
}

function sayFirstname() {
  console.log("My First name is Roy");
}

function sayLastname() {
  console.log("My First name is Daniel");
}
Enter fullscreen mode Exit fullscreen mode

Now to execute this funtions in a loop, first let's save all the function references to an array like this,

// Functions to execute
function greetPeople() {
  console.log("Hello People!");
}

function sayFirstname() {
  console.log("My First name is Roy");
}

function sayLastname() {
  console.log("My First name is Daniel");
}

// save the functions
// references in an array
const funcArr = [greetPeople, sayFirstname, sayLastname];
Enter fullscreen mode Exit fullscreen mode

NOTE: We are only saving the references to the functions in the array and not calling the functions inside the array.

Now to call these functions, let's use a for loop and loop through each element in the array (in our case it is the functions references) and call the functions inside the loop. It can be done like this,

// Functions to execute
function greetPeople() {
  console.log("Hello People!");
}

function sayFirstname() {
  console.log("My First name is Roy");
}

function sayLastname() {
  console.log("My First name is Daniel");
}

// save the functions
// references in an array
const funcsArr = [greetPeople, sayFirstname, sayLastname];

// Loop through each array elements (functions references)
// and invoke the functions
for (let i = 0; i < funcsArr.length; i++) {
  // get the current function getting looped
  const func = funcsArr[i];

  // call the function
  func();
}
Enter fullscreen mode Exit fullscreen mode

Now if we look into the console we will see this output from the three functions in the array.

Hello People!
My First name is Roy
My First name is Daniel
Enter fullscreen mode Exit fullscreen mode

See the above code live in JSBin

We can also acheive the same using the forEach() array method like this,

// Functions to execute
function greetPeople() {
  console.log("Hello People!");
}

function sayFirstname() {
  console.log("My First name is Roy");
}

function sayLastname() {
  console.log("My First name is Daniel");
}

// save the functions
// references in an array
const funcsArr = [greetPeople, sayFirstname, sayLastname];

// Loop through each array elements (funtions references)
// and invoke the funtions
funcsArr.forEach((func) => {
  // call the current
  // funtion getting looped
  func();
});
Enter fullscreen mode Exit fullscreen mode

See the above code live in JSBin

The output of using both methods is the same.

That's all πŸ˜ƒ!

Feel free to share if you found this useful πŸ˜ƒ.


Discussion (0)