JavaScript - Higher Order Function

A higher order function accepts other functions as parameters and returns a function. To know about Higher-order functions, we should learn about call back functions.

A call back function is a function that is passed to another function as an argument. With the help of call back functions, one function can call another function and the call back function runs only after other function has finished. Some of the higher-order functions are map, reduce and filter.

Let us take an example and implement it without using any higher order functions.

Example

In the following code, we have a list of numbers and we want to increment each element by 10, to achieve this without using higher order functions, we need to loop through the array using for loop and increment each value by 10 and push the incremented values to a new array. Finally, print the incremented array using console.log().

const numbers = [1, 2, 3, 4, 5];
incrementedNums=[]

for(i = 0; i < numbers.length; i++){
   added = i + 10
   incrementedNums.push(added)
}
console.log(incrementedNums)

Output

[ 11, 12, 13, 14, 15 ]

And this is how a map function works. It iterates over an array and executes a provided function once for each array element and return the output as an array. Map() function does not change the original array, also it does not perform the operation on an empty array.

Below JavaScript functions are some inbuilt Higher Order Functions

map()
filter()
reduce()
forEach()

Advantages of Higher Order Functions

Following are the advantages of Higher Order Functions −

Code Reusability
Less Code
Easy to Understand
Easy to Maintain

Usage of Higer Order Function

Let us take the same example and implement it using higher order functions.

Using map() function

map() function iterates through an array and appllies a callback functionfor every element in the array. Let us consider another example and understand. In the following example, map function iterates through the given array of numbers and passes them into sqrt function, resulting an output of root values.

numbers=[4,9,16,25,36]
root= numbers.map(Math.sqrt)
console.log(root)

Output

[2, 3, 4, 5, 6]

Using filter() function

The filter() method shallow copies of the array and filters down the value which passes the condition implemented by the provided callback function. It is an iterative method, which calls the callback function given as an argument for each element in the array and return an output array with the elements which returned truthy value by the callback function.

Example

In the following example, we have a list of numbers and we want to filter out the even numbers from the list. To achieve this, we need to use filter() function and pass a callback function which returns true if the number is even.

numbers=[10, 11, 12, 14, 15]

even=numbers.filter(iseven)
function iseven(n){
   return(n%2===0)
}
console.log(even)

Output

[ 10, 12, 14 ]

Using reduce() function

Similar to map and foreach, reduce method also executes a callback function (reducer function) on every element of the array, resulting a single output. In simple terms, the reduce method reduces the array to a single value. The Parameter of the reducer function is a callback function, which further has two arguments, accumulator and current value. Where current value is the current iterated value of the array. accumulator accumulates the callback function's output. The final return value is stored in the accumulator.

Example

In the following example, we have a list of numbers and we want to find the sum of all the numbers in the list. To achieve this, we need to use reduce() function and pass a callback function which returns the sum of two numbers.

numbers=[10,11,12,13]

total =numbers.reduce(function(acc,el){
   return acc+el
},0)
    
console.log(total)

Output

Using forEach() function

The forEach method is similar to a map function, where it executes the callback function for each element in the array. The only difference between forEach() and map() is that, map function returns an array output, where as forEach returs undefined, it just iterates through the array.

Example

Below code shows the working of forEach method

const numbers = [10, 20, 30, 40];

sum=0
numbers.forEach(add)
    
function add(n){
   sum=sum+n
}
console.log(sum)

Output

Conclusion

Higher Order Functions operate on other functions, either by taking them as arguments or by returning them. JavaScript being a functional programming language, supports Higher Order Functions. Higher Order Functions are used to make the code more readable and maintainable. They help in reducing the code and make it more concise. JavaScript provides inbuilt Higher Order Functions like map(), filter(), reduce() and forEach().

Print Page