Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a function that invokes each provided function using JavaScript?
In JavaScript, functions are first-class objects, which means they can be passed as arguments to other functions. This is a powerful feature that can be used to create some interesting patterns.
One such pattern is the "invoke- each" pattern, where a function is created that invokes each provided function with the arguments it receives.
Why Use the Invoke-Each Pattern?
There are a few reasons why you might want to use the invoke-each pattern.
First, it can be used as a way to abstract away the details of how a set of functions are invoked. This can be helpful if the functions are invoked in a complex or repetitive way.
Second, it can be used to create a "pipe" of sorts, where the output of each function is passed as input to the next function in the chain. This can be a handy way to string together a series of operations.
Finally, it can be used to create a "tee" function, which invokes multiple functions with the same arguments and collects the results. This can be useful for logging, debugging, or other purposes.
How to Implement the Invoke-Each Pattern?
There are a few different ways to implement the invoke-each pattern.
The most straightforward way is to simply loop over the provided functions and invoke each one with the arguments −
function invokeEach(functions, args) { for (var i = 0; i < functions.length; i++) { functions[i].apply(null, args); } }
In the above code, we loop over the functions and invoke each one with the Function.prototype.apply() method. This method allows us to call a function with a specific this value and an array of arguments.
We use the apply() method here because it's a convenient way to pass the arguments as an array. You could also use the Function.prototype.call() method, which allows you to pass the arguments as individual values.
Example
Below is the full working code example.
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div> <script> function foo(x) { document.getElementById("result").innerHTML = 'foo: ' + x; } function bar(x) { document.getElementById("result1").innerHTML = 'bar: ' + x; } function baz(x) { document.getElementById("result2").innerHTML = 'baz: ' + x; } function qux(x) { document.getElementById("result3").innerHTML ='qux: ' + x; } function invokeEach(functions, args) { for (var i = 0; i < functions.length; i++) { functions[i].apply(null, args); } } invokeEach([foo, bar, baz, qux], [5]); </script> </body> </html>
As you can see, the code example above defines four functions: foo(), bar(), baz(), and qux(). These functions simply print out a message with the provided argument.
Next, we define the invokeEach() function, which takes an array of functions and an array of arguments. This function loops over the provided functions and invokes each one with the provided arguments.
Finally, we invoke the invokeEach() function, passing in the four functions and the single argument 5. As expected, this results in each function being invoked with the argument 5.
In this tutorial, we looked at the invoke-each pattern in JavaScript. This pattern can be used to create a function that invokes each provided function with the arguments it receives.
We saw how to implement this pattern and looked at a few reasons why you might want to use it.
80 Views
