What are Higher-order functions?

Higher-order functions are functions that take other functions as arguments and/or return functions as their outputs.

Taking another function as an argument is often referred to as a callback function because it is called back by the higher-order function. This is a concept that Javascript follows a lot.

map, sort, reduce, filter, forEach are examples of higher-order functions.

Why do we use higher-order functions?

• Higher-order functions allow you to write simpler and more polished code.
• It will save a lot of time for you.
• It can hold, manipulate, and pass the manipulated data anywhere, and ultimately will give you an easy solution.

Here we are going to study regarding the map, filter, and reduce functions. Let us dive into it.

• .map()

The .map() method performs a callback function on each element in an array. Based on those instructions, it will return a new array formed from the return values of the callback function.

The initial array does not get modified, and the returned array may contain distinct elements than the initial array.

For example,

const arr=[1, -1, 2, 3, 4, 5, 6];
const mappedArr = arr.map(function (x){
    return x*x;
})
console.log(mappedArr);
// Output:[1,1,4,9,16,25,36]

• .filter()

From the name ' filter ', it suggests that from a group of elements it will filter out the elements based on the given conditions.

Similarly in Javascript, the .filter() method performs a callback function on each element in an array. The callback function for each of the elements must return either true or false. The returned array is a new array with only the elements for which the callback function returns true. And for the elements, for which it is false, it will be discarded.

For example,

const arr=[1, -1, 2, 3, 4, 5, 6];
const filteredArr=arr.filter(function (x){
   return x%2===0;
})
console.log(filteredArr);
// Output:[2,4,6]

• .reduce()

The .reduce() method iterates through an array and returns a singular value.

It takes a callback function with two parameters (accumulator, currentValue) as arguments. On each iteration, the accumulator is the value returned by the last iteration, and the currentValue is the current element. Optionally, a second argument can be passed that acts as the initial value of the accumulator.

For example,

//a=0, c=1 => a=1
//a=1, c=-1 => a=0
//a=0, c=2 => a=2
//a=2, c=3 => a=5
//a=5, c=4 => a=9
//a=9, c=5 => a=14
//a=14, c=6 => a=20
const arr=[1, -1, 2, 3, 4, 5, 6];
const reducedArr=arr.reduce(function(accumulator, currVal){ 
    return accumulator + currVal;
},0) //initializing the accumulator to 0
console.log(reducedArr);
// Output: 20

Here, the .reduce() method will sum all the elements of the array and will give the output as 20

Now as we have studied these functions, here is a simplistic explanation of map, filter, and reduce functions.

That's it, thanks for making it to the end, hope you learned something interesting. Let's connect on Twitter or LinkedIn

Have a great day! :)