4 Must-Know Higher-Order Functions in JavaScript
Higher-Order functions are one of those things in JavaScript that sounds incredibly complicated, but isn’t. By definition, a higher-order function is just a function that either accepts or returns a function. That’s it! Some of the most common and useful functions in JavaScript are higher-order functions, such as .map(), .filter(), .reduce(), and .forEach(). In this article, we will explore each of these functions in more detail.
1. map( )
This HOF is one of the most popular and most commonly used functions in JavaScript. The .map() function takes in a callback function as an argument and returns a new array object. As a reminder, a callback function is defined by the MDN web docs as:
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
In our code below, we can see two examples of the .map() HOF in action. In the first example, we are taking an array of numbers, numsA, and using the .map() function to return a new array with the values doubled. You’ll notice that in this example, we use an anonymous function as our callback.
In the second example, we use the arrow syntax to tighen up our code, reducing it from four lines of code to just one. Additionally, we name the return value of our .map() function which allows us to call our new sqaured array whenever we want. We also see that our original array object is left intact.
2. filter( )
This function is incredibly useful for — you guessed it — filtering array values. This HOF takes in a callback function and returns a new array object of all the values that meet the criteria.
In example #1 below, we use the .filter() function to create a new array, isEven, that contains only the even numbers from our original array object. The result is a two-item array containing the values 6 and 8.
In example #2, we use the .filter() function several times to create new array objects based off the price of the meal, the availability of the meal, and the portion size of the meal.
3. reduce( )
The .reduce() function takes in a callback function with two arguments, the accumulator and the current value, along with an initial value and returns a single value. This single value is the reduced value of all the numbers in an array. This is perfect for adding up all values in an array, especially if you need to modify those numbers before adding them.
The accumulator argument is used what the function will use to keep a running total of the values added. The current value represents the current value being iterated on. The initial value is that starting total for the accumulator. If you omit the initial value, the .reduce() function will assign the first value as the initial value and skip it as the current value. This is essentially the same as setting the initial value to zero. You can of course set the initial value to be anything, including another variable.
Finally, the .reduce() method can also take in additional arguments in the callback function including the index of the current array value.
4. forEach( )
The .forEach() method is a great higher-order function to replace a typical while and for loops in JavaScript.
