Higher Order Function in Javascript

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 <--

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