Ever confused what is higher order function?

So Higher order function is the function which take function as an argument and return something based on that function, It also referred as callback function.

Still confused ?,

Let's dive deep into it.

So in Javascript we can do so many things with function like

Can be stored in a variable, Can be assigned to the object property, Can be passed as an argument. Can be returned from other functions.

Here are some example of simple functions.

function sayHello(){
    console.log('Hello!')
}

sayHello();

//output "Hello!"

We have made a function name sayHello which is just printing the Hello.

Now we can store it in a variable like this.

function sayHello(){
    return "Hello!" 
}

const hello = sayHello();

console.log(hello);

//output "Hello!"

Now let's look at higher order functions.

Here are some basic higher order functions.

• map

• filter

• forEach

• reduce

• some

• every

• reduceRight

And so many are there, but if you learn the concept/basics of higher order function then the rest of them will be easy to understand.

1 - forEach

As we know, higher order function can take the function as an argument, See the example below.

const number = [1,2,3,4,5];

number.forEach(function(item,index,arr){
    console.log(item);
})

From the above example, we can see that the argument of forEach is a function.

Some facts of forEach is described below like,

Whenever we pass any function inside the forEach, we can also pass another 3 arguments in it.

First argument will return array item

Second argument return index

Third Argument will return array iteself.

We can't break or return from forEach (scary but true)

2 - map

map function is also similar like forEach, but it will return new array based on previous array elements.

We can process or manipulate main array without mutate the array.

See the example below.

const number = [1,2,3,4,5];

const anotherNumber = number.map(function(item,index,arr){
    return item*2
})

console.log(anotherNumber)

//output [2, 4, 6, 8, 10];

We multiplied number array with 2, and it returned all elements with multiplied by 2, But if you print a number array, It will be the same as before because it is not mutated by map.

3 - filter

Again filter is similar to map, but it returns value based on certain condition, In short it filter the data.

For an example, we want to filter some numbers which is greater than 10, so filter will be the best option for that scenario.

const number = [10,20,3,40,5];

const anotherNumber = number.filter(function(item,index,arr){
    return item>10;
})

console.log(anotherNumber)

//output [20,30];

On the basis of output, you can see that how filter returned the number based on our condition.

Let's take another example,

Suppose we have some users, and we want all the users which is online.

const users = [{
    name:'john',
  status:"online"
},
{
    name:'jack',
  status:"offline"
},
{
    name:'paul',
  status:"online"
},
{
    name:'james',
  status:"offline"
},
{
    name:'tony',
  status:"offline"
}];


const onlineUsers = users.filter(filterUsers)

function filterUsers(users,index,array){
    return users.status==="online"
}

console.log(onlineUsers);

// output will be 
[{
  name: "john",
  status: "online"
}, {
  name: "paul",
  status: "online"
}]

Here we grab the online user's data, We also can make a separate function and can pass as an argument because now we know it is a higher order function.

4 - Reduce

At the first glance reduce seems difficult but i will try to make it simple as much as I can.

So we want to make the total sum of number array elements.

By using reduce, it would be very simple.

const number = [10,20,3,40,5];

const totalSum = number.reduce(function(accumulator,item,index,array){
    return accumulator+item;
},0)

console.log(totalSum)

//output = 78

Here is function which passed in argument seems a bit different because in reduce method first argument will be accumulator or any name you want to give it to, first argument tells the function that from where it can start adding number;

Note : All arguments in higher order function is optional, but mostly you will need first and second argument which is element of an array and index, Also you can give it any name you want.

So these are some higher order functions and still there are so many but if you learn these functions and understand the concepts then rest are easy to learn.

Thanks for the reading and comment it if you still have any doubt and do like if you think it is useful.

Bye :)