Higher-order Functions

#javascript #higherorderfunctions #example #webdev

A function takes another function has an argument (or) returns a function is called as Higher-Order functions

 function X(){
       console.log("Hey Luffy");               
      }

 function Y(X){
  x();
 }
 y()(); // Prints Hey Luffy

Here, function Y is accepting X() as an argument, Hence Y becomes a Higher-order function.

Understanding the purpose of Higher-order functions with an example

Consider the array of radius const radius = [3,4,5,1];
And the objective is to calculate the Area, Circumference and Diameter
Normal functions:

const calculateArea = function(radius){
const output = [];
   for(let i = 0; i < radius.length ; i++){
   output.push(Math.pi*radius[i]*radius[i]);
   }
return output;
}

const calculateCircuference = function(radius){
const output = [];
   for(let i = 0; i < radius.length ; i++){
   output.push(Math.pi*2*radius[i]);
   }
return output;
}

const calculateDiameter = function(radius){
const output = [];
   for(let i = 0; i < radius.length ; i++){
   output.push(2*radius[i]);
   }
return output;
}

The above 3 functions work perfectly, but there's a problem.
can you spot the problem? If you spot it, we will try to solve the problem, else the problem is:

Repetitive code => There's a principle in software Engineering, DRY principle which stands for Don't repeat yourself. the above 3 functions have almost 90% of the same code, and what changes is the logic of Area, Circumference, Diameter.

Optimized Approach:
After Observing the functions, we are repeating the array declaration, iterating loop, returning array again and again. And the logic is the only thing which is changing.
and why don't we just extract the logic outside the function and writing it as an separate function.
Eg:

const area = function(radius){
return Math.pi*radius[i]*radius[i];
}

Now let us write a generic function which the accepts the Array, and the logic function as argument, and just perform array initialization, loop iteration, logic function call, and return array.
Yeah, we are writing a Higher order function.

const calculate = function(radius, logic){
 const output = [];
   for(let i = 0; i < radius.length ; i++){
   output.push(logic(radius[i])); // every time the logic is called with new array value.
   }
return output;
}

If we call the calculate function calculate(radius,area); it returns the array of Areas.

THE BEAUTY:
Lets see how amazing the calculate function is.
Now we need to calculate the circumference, diameter. we no longer need to copy paste the code. But we can just write the logic function circumference and diameter or any value you want to find.
just write the logic in a function and pass it to calculate function as a second argument.

const circumference = (radius){
return 2*Math.pi*radius;
}
const daimeter = (radius){
return 2*radius;
}

just call the calculate function with these two passed as second argument. calculate(radius,circumference) calculate(radius,daimeter)

Conclusion:
Functional programming is huge in itself but as a small part of it say that "Think in smaller functions". Whenever you're giving a coding round Interview then try to write the code in Higher-order functions.

Thank you.