Hello Guys today i am going to discuss Higher order function in javascript.

Lets get started...

## What is Higher Order Function?

A “higher-order function” is a function that accepts another functions as parameters and/or returns another function.

Lets understand the importance of Higher order function with a beautiful example -

### We are going to calculate area , circumference and Diameter of 4 circles using functions.

## Example - Using Normal approach -

```
//Normal Functions
const radius = [5,8,10,14];
const calculateArea = (radius) => {
const output = [];
for (let i = 0; i < radius.length; i++) {
output.push(Math.PI * radius[i] * radius[i]);
}
return output;
}
const calculateCircumference = (radius) => {
const output = [];
for (let i = 0; i < radius.length; i++) {
output.push(2 * Math.PI * radius[i]);
}
return output;
}
const calculateDiameter = (radius) => {
const output = [];
for (let i = 0; i < radius.length; i++) {
output.push(2 * radius[i]);
}
return output;
}
console.log(calculateArea(radius))
console.log(calculateCircumference(radius))
console.log(calculateDiameter(radius))
```

### Output-

```
[
78.53981633974483,
201.06192982974676,
314.1592653589793,
615.7521601035994
]
[
31.41592653589793,
50.26548245743669,
62.83185307179586,
87.96459430051421
]
[ 10, 16, 20, 28 ]
```

### Explaination -

- Here first we have created an array of 4 elements , these elements represent radius of circles.
- Then we have created 3 functions namely "calculateArea" , "calculateCircumference" and "calculateDiameter" to calculate area , circumference and diameter of these 4 circles.
- Inside every function we have created a output empty array and then iterate over the radius array and push the value to the empty output array after applying the logic related to that function .
- But it violates the DRY - "Dont Repeat Yourself" principal as you can see the functions are almost 90% same just the logic part is different and we repeating that 90% part again and again.

#### To solve This problem , we are going to use higher order function approach.

### Example - Higher order function approach

```
const radius = [5,8,10,14]
const area = (radius) => {
//logic for area
return Math.PI * radius * radius;
}
const circumference = (radius) => {
//logic for circumference
return 2 * Math.PI * radius;
}
const diameter = (radius) => {
//logic for diamter
return 2 * radius;
}
//passing the logic function as an argument
const calculate = (radius,logic) => {
const output = [];
for (let i = 0; i < radius.length; i++) {
//using the logic function passed in the parameter
//and inside the logic function , we have passed
// radius array values
output.push(logic(radius[i]));
}
return output;
}
//passing the area function as an argument
console.log(calculate(radius,area));
//passing the circumference function as an argument
console.log(calculate(radius,circumference));
//passing the diamtere function as an argument
console.log(calculate(radius,diameter))
```

### Output-

```
[
78.53981633974483,
201.06192982974676,
314.1592653589793,
615.7521601035994
]
[
31.41592653589793,
50.26548245743669,
62.83185307179586,
87.96459430051421
]
[ 10, 16, 20, 28 ]
```

- As you can see , we have created 3 functions for area, circumference and diamter with the logic part and passed these function as an argument to calculate function.
- It makes our code more reusable and more cleaner and easy to read.
- This is the beauty of higher order functions.

### There are some inbuilt higher order functions in javascript like reduce , filter , map etc.

## Example - Using map function

If you see the example above more closely what we are doing is mapping the array with some logic , let me explain it with an example

```
//We can implement the same logic above in the example
// like this
const radius = [5,8,10,14]
const area = (radius) => {
return Math.PI * radius * radius;
}
const circumference = (radius) => {
return 2 * Math.PI * radius;
}
const diameter = (radius) => {
return 2 * radius;
}
//mapping the value with the logics using
//map function by passing the logic as an
//arguments like we did in the above example
console.log(radius.map(area));
console.log(radius.map(circumference));
console.log(radius.map(diameter));
```

### Output-

```
[
78.53981633974483,
201.06192982974676,
314.1592653589793,
615.7521601035994
]
[
31.41592653589793,
50.26548245743669,
62.83185307179586,
87.96459430051421
]
[ 10, 16, 20, 28 ]
```

- As you can see, the map functions produces the same result like in the example above.

### Thats it for this post.

### THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.

## ^^You can help me by some donation at the link below Thank you👇👇 ^^

☕ --> https://www.buymeacoffee.com/waaduheck <--

## Top comments (0)