Javascript Higher order functions map,reduce and filter for beginners

In this tutorial i will explain the basic concepts of javascript higher order fuctions and its usecases with hands on examples.

Before diving deep into the map,reduce and filter, lets understand what is a higher order function.The defenition of higher order function is

A higher order function is a function that takes a function as an argument, or returns a function.

In otherwords we can consider higher order functions as functions that allows us to do specific tasks such as filtering,looping etc more faster than the typical way of doing that.

map fuction

We all are familiar with the basic forloop.Obvisiously that is one of the basic concept of any programming language.We use forloop to loop through an array and to perform some operations with array elements.But a basic forloop is not returning us anything.Here, the map function come into the picture.We can use javascript map functions on arrays that allows us to loop through each array elements and will return a new array.We can modify the array elements if needed.
If the above explanation doesn't make sense to you, no problem.You will defenitely understand it as we move forward with the examples.

const numbers = [1,2,3,4,5,6,7,8];
   const modifiedArray = array.map((number,index) => {
     number * 2
   })
  console.log(modifiedArray)

Output

[2,4,6,8,10,12,14,16]

In the above code snippet, we are applying map function on an array numbers that consists of 8 elements.We want an array that contains each elements of the array numbers multiplyed by 2. The map function takes an anonymous function as callback.The anonymous function have two parameters.The first parameter is an array element and second parameter is index of corresponding element.

Map fuction is super common in javascript frameworks like react.We know that react returns jsx that is pretty similar to html.Consider a scenario where we want to render each elements of the array without hardcoding them into html.Here, we can make use of map fuction to loop through the array and return each element within html tags
eg:

const App = () => {

const fruits = ["apple","orange","mango","pineapple"];

return(
<>
{
fruits.map(fruit => 

<h3> fruit </h3>

}
</>
)
}

Output

Filter

Filter is a javascript high order function that can be used to filter items from an array.

const data = [1,2,3,4,5]
const filteredArray = data.filter((data) => data != 4)
console.log(filteredArray)

The syntax of filter function is pretty similar to map function.Filter function takes a callback function as argument which contains each array elements as arguments and return a filtered array based on the given condition.The above example will console [1,2,3,5] since the condition for filtering is that the element should not be equal to 4

Reduce

The reducer function seems a little tricy compared to map and filter.Reducer basically returns a single value that is the accumulated result of the function.

const data = [1,2,3,4,5];
const sum = data.reduce((acc, data) => {
  return acc + data; //Adding cuurent elemt to the accumulator
}, 0);
console.log(sum);

Reducer mainly takes two parameters.The first one is a callback function that has an accumulator and the array element(The element we get when we loop through the array.Similar to map and filter functions).The second parameter is an initial value of accumulator.The operation that we have to perform is written in the body of callback function and the value is returned.The output of above example will be 21.In the above example we are adding the current element to the accumulator value and returning it

Conclusion

In this we looked at the popular javascript higher order functions that we can use to make our code more efficient.

`