Higher Order Function in Javascript
Tags: javascript, programming, productivity, webdev
Published: 2022-01-25 07:39:35

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 - 
```javascript
//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
```javascript 

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
```javascript
//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 <--

###Also check these posts as well
1. https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj 

2. https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

3. https://dev.to/shubhamtiwari909/text-to-speech-in-reactjs-52ml

4. https://dev.to/shubhamtiwari909/animation-with-react-spring-3k22