In JavaScript, a function can invoke multiple other functions by receiving them as arguments and executing them one after another. This is useful when several operations need to be performed using the same input.
- Functions can be passed as arguments to another function.
- Multiple functions can be stored in an array and executed sequentially.
- The same arguments can be passed to each function.
- This approach promotes reusable and modular code.
- It is commonly used with higher-order functions and callbacks.
The following approaches can be used to invoke multiple functions in JavaScript.
Approach 1: Using a Higher-Order Function
A higher-order function is a function that accepts another function as an argument or returns a function. We can use this concept to create a function that invokes multiple functions with the same input.
function findEven(numbers) {
return numbers.filter(num => num % 2 === 0);
}
function findOdd(numbers) {
return numbers.filter(num => num % 2 !== 0);
}
function segregateEvenOdd(numbers, ...functions) {
console.log("Given array:");
console.log(numbers);
functions.forEach(func => {
console.log(func.name + ":", func(numbers));
});
}
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
segregateEvenOdd(numbers, findEven, findOdd);
Output
Given array: [ 1, 2, 3, 4, 5, 6, 7, 8 ] findEven: [ 2, 4, 6, 8 ] findOdd: [ 1, 3, 5, 7 ]
findEvenandfindOddare passed as arguments tosegregateEvenOdd().- The rest parameter
...functionscollects the functions into an array. forEach()invokes each function with the samenumbersargument.- This makes the main function reusable for any number of operations.
Syntax:
function invokeFunctions(data, ...functions) {
functions.forEach(func => func(data));
}
invokeFunctions(data, function1, function2, function3);
Approach 2: Using an Array of Callback Functions
Multiple functions can be stored in an array and invoked sequentially using forEach(). This is useful when the number of functions is dynamic.
function findMin(numbers) {
return Math.min(...numbers);
}
function findMax(numbers) {
return Math.max(...numbers);
}
function findSum(numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
function processNumbers(numbers, callbacks) {
callbacks.forEach(callback => {
console.log(`${callback.name}:`, callback(numbers));
});
}
const numbers = [20, 30, 40, 50, 60, -20, -40, 90, 100];
const operations = [
findMin,
findMax,
findSum
];
processNumbers(numbers, operations);
Output
findMin: -40 findMax: 100 findSum: 330
operationscontains references to multiple functions.processNumbers()receives the array of callback functions.forEach()executes each callback using the samenumbersarray.- New operations can be added to the array without changing
processNumbers().
Syntax:
function processData(data, callbacks) {
callbacks.forEach(callback => {
callback(data);
});
}
processData(data, [function1, function2, function3]);
Approach 3: Using a Common Invoker Function
A separate invoker function can be created to execute any number of functions with the same arguments.
function invokeAll(functions, ...args) {
functions.forEach(func => {
func(...args);
});
}
function greet(name) {
console.log(`Hello, ${name}!`);
}
function welcome(name) {
console.log(`Welcome, ${name}!`);
}
function showMessage(name) {
console.log(`Have a great day, ${name}!`);
}
const functions = [
greet,
welcome,
showMessage
];
invokeAll(functions, "Ryan");
Output
Hello, Ryan! Welcome, Ryan! Have a great day, Ryan!
- invokeAll() accepts an array of functions and any number of arguments.
- The rest parameter ...args collects the arguments.
- The spread syntax func(...args) passes the same arguments to each function.
- This provides a generic way to execute multiple functions with shared input.
Syntax:
function invokeAll(functions, ...args) {
functions.forEach(func => {
func(...args);
});
}
Note: When the functions need to return values, use map() instead of forEach() to collect the results. When the functions perform actions without needing their return values, forEach() is sufficient.