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();
}
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");
}
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];
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();
}
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
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();
});
See the above code live in JSBin
The output of using both methods is the same.
That's all 😃!