Like many, I heavily relied on loops when I first embarked on my coding journey. I looped over objects and arrays.
Loops are at the heart of many parts of coding. Could we write the loop once and then reference the loop and continue with the rest of my current function?
This is what higher-order functions do.
Consider a real-world scenario where you must process various numbers in various ways. For instance, you should filter out only the even numbers, perhaps only the odd numbers.
Without higher-order functions, this is what the code for this process would look like:

Set up an output array.
Loop through the input array.
Set up an if statement to see if a given number has a remainder when divided by 2.
If the answer is true, push those numbers to the output array.

The same process applies but determines if a given element’s remainder does not equal 0 when that number is divided by 2.
The first thing you’ll notice when looking at this code is that it is mostly redundant. The only difference is what is inside the if statement. As coders, we should always ask ourselves how to eliminate redundancy. How can I make my code more abstract?
In JavaScript, functions are just data and can be passed into other functions as data so that a function can be a parameter of another function. These passed-in functions are called callbacks. Essentially, a higher-order function is a function that takes in another function as a parameter.
Let’s take a look at the inner workings of the Filter Higher-Order Function. This is what happens in the background when the native filter is invoked.

If you compare this setup to the other functions, you’ll notice again that they are almost identical. The difference comes when we apply the callback function to every element in the array instead of directly stating what we want to happen, like in the other examples. Here, we know that whatever the callback function is, we want to invoke it on every element of the array.
This is all well and good, but how does it relate to making my life easier as a coder?
When you invoke something like Filter, the only piece of code you need to write is the one line I pointed out as repudiative because the filter has taken care of the rest of the code for you.
You are replacing the loop you would typically write every time with the loop in the filter, and you are passing the statement you are writing into the “truth test,” which is the if statement in the filter function.
So, the last part of this process is invoking the native form of the filter function.

We start by telling the computer what array we’re acting upon and then .filter. Next, what is the perimeter? The callback function with its perimeter is then done with the arrow function syntax. All that’s left is the one line that must go inside the if statement. That’s the whole game. We’ve taken seven lines of code and reduced it to 2.
Of course, there are other higher-order functions. Map, for example, changes every element in the input array rather than putting it through a truth test. However, I hope this deep dive into Filter has given you a better understanding of how and why higher-order functions are so helpful when striving for clean, readable code.
Top comments (0)