YogeshChauhan.com
Higher Order Functions in JavaScript with Examples
November 7, 2020


Higher Order Functions

What are Higher Order Functions?

💡 Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

Higher-order functions allow us to abstract over actions, not just values.

They come in several forms. For example, we can have functions that create new functions.

Higher Order Functions in JavaScript: create new functions.
Higher Order Functions in JavaScript: create new functions

There is a built-in array method, forEach, that provides something like a for/of loop as a higher-order function.

Higher Order Functions in JavaScript: forEach
Higher Order Functions in JavaScript: forEach

Furthermore, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.

Examples

Let’s take a look at different examples of higher order functions.

Array.prototype.map

The map() method creates a new array by calling the callback function provided as an argument on every element in the input array.

💡 The map() method will take every returned value from the callback function and creates a new array using those values.

The callback function passed to the map() method accepts 3 arguments: element, index, and array.

Example 1

Let’s say we have an array of numbers and we want to create a new array which contains double of each value of the first array. Let’s see how we can solve the problem with and without Higher-Order Function.

Without Higher-order function map

Higher Order Functions in JavaScript: Without function map
Higher Order Functions in JavaScript: Without function map

With Higher-order function map

Higher Order Functions in JavaScript: With function map
Higher Order Functions in JavaScript: With function map

We can make this even shorter using the arrow function syntax:

Higher Order Functions in JavaScript: map with arrow function
Higher Order Functions in JavaScript: map with arrow function

Example 2

Let’s say we have an array containing the birth year of different persons and we want to create an array that contains their ages. For example:

Without Higher-order function map

Higher Order Functions in JavaScript: without function map
Higher Order Functions in JavaScript: without function map

With Higher-order function map

Higher Order Functions in JavaScript: with function map
Higher Order Functions in JavaScript: with function map

Array.prototype.filter

💡 The filter() method creates a new array with all elements that pass the test provided by the callback function.

The callback function passed to the filter() method accepts 3 arguments: element, index, and array.

Example

Let’s say we have an array which contains objects with name and age properties. We want to create an array that contains only the persons with full age (age greater than or equal to 18).

Without Higher-order function filter

Higher Order Functions in JavaScript: without filter function
Higher Order Functions in JavaScript: without filter function

With Higher-order function filter

Higher Order Functions in JavaScript
Higher Order Functions in JavaScript: with filter function

Array.prototype.reduce

💡 The reduce method executes the callback function on each member of the calling array which results in a single output value.

The reduce method accepts two parameters:

1) The reducer function (callback),

2) and an optional initialValue.

The reducer function (callback) accepts four parameters: currentValue, currentIndex, sourceArray.

If an initialValue is provided, then the accumulator will be equal to the initialValue and the currentValue will be equal to the first element in the array.

If no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array.

Example

Let’s say we have to sum an array of numbers:

With Higher-order function reduce

Higher Order Functions in JavaScript: without function reduce
Higher Order Functions in JavaScript: without function reduce

Every time the reducer function is called on each value in the array, the accumulator keeps the result of previous operation returned from the reducer function, and the currentValue is set to the current value of the array. In the end the result is stored in the sum variable.

We can also provide an initial value to this function:

Higher Order Functions in JavaScript: with function reduce
Higher Order Functions in JavaScript: with function reduce

Without Higher-order function reduce

Higher Order Functions in JavaScript: without function reduce
Higher Order Functions in JavaScript: without function reduce

As we can see that using High-order function made our code cleaner, more concise and less verbose.

Creating Higher-Order Function

Up until this point, we saw various Higher-order functions built into the language. Now let’s create our own Higher-order function.

Let’s imagine JavaScript didn’t have the native map method. We could build it ourselves thus creating our own Higher-Order Function.

Let’s say, we have an array of strings and we want to convert this array to an array of integers, where each element represent the length of the string in the original array.

Creating Higher Order Functions in JavaScript
Creating Higher Order Functions in JavaScript

In the above example, we created an Higher-order function mapForEach which accepts an array and a callback function fn. This function loops over the provided array and calls the callback function fn inside the newArray.push function call on each iteration.

The callback function fn receives the current element of array and returns the length of that element, which is stored inside the newArray. After the for loop has finished, the newArray is returned and assigned to the lenArray.

Sources

dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields? Feb 21 WordPress: How to add a Search Icon in Menus with toggle effect using jQuery?



You might also like these

MySQL queries to get data rows from previous month as well as from last 30 daysSQL/MySQLLearn how to add Scroll Indicator using CSS and JavaScript?CSSLearn to create profile card using HTML and CSSCSSA complete diagram with building blocks of an Angular applicationAngularJavaScript Input Validation Theme Park Example using throw StatementJavaScriptWhat is PostgreSQL? How similar or different it is from SQL?Postgres