Others
How to Use Higher-Order Functions in JavaScript
Mar
Here’s a great article from SitePoint
One of the characteristics of JavaScript that makes it well-suited for functional programming is the fact that it can accept higher-order functions. A higher-order function is a function that can take another function as an argument, or that returns a function as a result.
First Class Functions
You may have heard it said that JavaScript treats functions as first-class citizens. What this means is that functions in JavaScript are treated as objects. They have the type Object, they can be assigned as the value of a variable, and they can be passed and returned just like any other reference variable.
This native ability gives JavaScript special powers when it comes to functional programming. Because functions are objects, the language supports a very natural approach to functional programming. In fact, it’s so natural, that I’ll bet you’ve been using it without even thinking about it.
Taking Functions as Arguments
If you’ve done much web-based JavaScript programming or front-end development, you’ve probably come across functions that use a callback. A callback is a function that gets executed at the end of an operation, once all of the other operations of been completed. Usually this callback function is passed in as the last argument in the function. Frequently, it’s defined inline as an anonymous function.
Since JavaScript is single-threaded, meaning that only one operation happens at a time, each operation that’s going to happen is queued along this single thread. The strategy of passing in a function to be executed after the rest of the parent function’s operations are complete is one of the basic characteristics of languages that support higher-order functions. It allows for asynchronous behavior, so a script can continue executing while waiting for a result. The ability to pass a callback function is critical when dealing with resources that may return a result after an undetermined period of time.
This is very useful in a web programming environment, where a script may send an Ajax request off to a server, and then need to handle the response whenever it arrives, with no knowledge in advance of network latency or processing time on the server. Node.js frequently uses callbacks to make the most efficient use of server resources. This approach is also useful in the case of an app that waits for user input before performing a function.
For example, consider this snippet of simple JavaScript that adds an event listener to a button.
[code language=”js”]document.getElementById(“clicker”).addEventListener(“click”, function() {
alert(“you triggered ” + this.id);
});
[/code]
This script uses an anonymous inline function to display an alert. But it could just as easily have used a separately defined function, and passed that named function to the addEventListener method
alert(“you triggered ” + this.id);
};
document.getElementById(“clicker”).addEventListener(“click”, proveIt);
[/code]
Note that we passed proveIt and not proveIt() to our addEventListener function. When you pass a function by name without parentheses, you are passing the function object itself. When you pass it with parentheses, you are passing the result of executing that function.
Continue reading
How to Use Higher-Order Functions in JavaScript
on SitePoint.