When I first encounter most things when learning programing, it seems like an alien language. There are unfamiliar words to learn, syntax, and initially everything is a bit confusing. The same was true when I first stumbled upon Higher-Order Functions, even more so. My goal in writing this is to possibly demystify Higher-Order Functions and come to a better understanding myself. Let’s dive right in.
First Class Functions
In JavaScript, functions are first class citizens. JavaScript is an object-oriented programming language (with functional paradigm structures as well). A function in JavaScript is an instance of an object type. Like an object, functions have properties and methods.
A first-class function is a feature in JavaScript where functions are treated like any other variable. A first-class function can be assigned as a value to a variable, can be passed as an argument into other functions, and can be returned by another function.
Consider this simple example:
1 // Function definition and invocation
2 function add(a,b) {
3 return a + b;
4 }
5 add(5, 6) // returns 11
6
7 // Stored in a variable
8 const sum = add;
9 sum(6,7) // returns 13
10
11 // Passed as an argument to a function
12 function functionReturner(fn){
13 return fn;
14 }
15 const total = functionReturner(sum)
16 total(5,5) // returns 10
Stored as variable
On line 2 we declare the function and call it on line 5. On line 9 we’ve created a variable called “sum” and assigned it the value of the “add” function, so that “add”, and “sum” are equal, and if we were to call “sum” with arguments it would return their sum.
One important thing to note, however, is that “add” is a function declaration and “sum” is a function expression. The reason for noting this is that function declarations are hoisted, and function expressions are not. Therefore, if you were to invoke “add” before the program reaches that line of code, it would return a value based on the arguments passed. However, “sum” would throw a reference error.
Passed as argument
Another feature of first-class functions is something known as a callback function. A callback function is passed a parameter in another function as shown on lines 11 through 16. You’ve probably seen this before in native functions like map() and filter() (which we’ll discuss later).
Returned by another Function
Something else you may have seen happen is another function returning a function. We can do this because functions are types of objects. This is particularly useful when writing larger programs that use similar functions repeatedly. You can use one function as a template to call inside another function.
Higher-Order Functions: Defined
What does any of this have to do with higher-order functions? Well, the bit about functions stored about variable isn’t particularly applicable, but functions passed as arguments and functions returned by other functions are the bread and butter of Higher-Order Functions. In fact, Higher-Order Functions ARE functions that either have another function passed in as an argument and/or return a function. In fact, Eloquent JavaScript, 3rd Edition (Haverbeke, 2018:86) defines it like this,
“Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Since we have already seen that functions are regular values, there is nothing particularly remarkable about the fact that such functions exist. The term comes from mathematics, where the distinction between functions and other values is taken more seriously.”
Simple as that. Note: a function that doesn’t take a function as an argument and/or returns a function is called a first-order function.
Native Higher-Order Functions
JavaScript features several native higher-order functions to make programming life slightly easier. (There are also other libraries like Lodash and Underscore which offer many more). I’ll discuss two native higher-order functions that are used regularly (at least, by me).
map()
The first of the native higher-order function I’d like to discuss is the map() function (which is technically a method). The map() function, or method, is used to iterate over an array (it works on all collections, but for simplicity’s sake, we’ll stick to arrays for today), perform an action on each individual element in the original array and return a new array. It takes one argument, the callback function, which performs an action on the elements of the first array and “maps,” or designs new elements based on the callback function. Let’s look at how map() works.
let myArray = [1,2,3,4,5]
function square(number){
return number*number;
}
let squaredArray = myArray.map(square);
console.log(squaredArray); // logs [1,4,9,16,25]
Notice we have a callback function called “square” which takes in each element in “myArray” (and has the option of taking in the index and the array as a whole), performs an action, of multiplying it to itself, and pushes the value into a new array.
filter()
Another function in the arsenal of native higher-order JavaScript functions is filter(). This method iterates over an array and creates a new array for each element of the original array that meet certain criteria. So, a callback function would look something like…
let myArray = [1,2,3,4,5]
function isEven(number) {
return number % 2 === 0;
}
console.log(myArray.filter(isEven)) // logs [2,4]
Conclusion
In summation, I discussed how functions are treated in JavaScript. Next, how functions can be passed in as arguments to other functions and functions can be returned by functions, as well. We learned this is the very definition of a Higher-Order function. Finally, we looked at two commonly used built-in Higher-Order functions featured by JavaScript.
Top comments (1)
Great article. Here are some recommendation from my side:
customize the post with a hierarchical manner, to let user to read efficently
make all the heading bold and add some space... and avoid long paragraph
while writing the try adding
jsafter triple tilt ...that would do some syntax highlight
like: