JavaScript Higher Order Functions with functional Programing

In this article we will look into the advantages of functional programming (FP) along with javascript inbuilt higher order function.

So,lets get started by implementing some examples in way that you understand better about functional programming.

const num = [2,3,4,5];

const calculateSquare = function (num){
const results = [];
for( let i=0; i<num.length;i++) {
 results.push(num[i] * num[i]);
}
return results;

};
console.log(calculateSquare(num));  //This returns ->(4) [4, 9, 16, 25]
const calculateCube = function (num){
const results = [];
for( let i=0; i<num.length;i++) {
 results.push(num[i] * num[i] * num[i]);
}
return results;
};
console.log(calculateCube(num));  //This returns ->(4) [8, 27, 64, 125]

we see in the above code though we are implementing the required functionalities (i.e the squares and cubes of the numbers in array(num) )aren't we repeating ourselves.we are just creating these arrays again and again in each function , iterating through and pushing it to our results and then returning the results .

Let's get into optimizing the code in an more functional way so that it looks much cleaner and easier to add more similar functionalities.

const num = [2,3,4,5];
console.log(num); // ->(4) [2, 3, 4, 5]

const square = function(num){
    return num * num;
}

const cube = function(num){
    return num* num * num;
}
//Added a new function to add the num
const add = function(num){
    return num + num;
}

const calculate = function(num,logic){
    const results = [];
    for( let i=0; i < num.length; i++) {
        results.push(logic(num[i]));
    }
    return results;
}
console.log(calculate(num,square)); -> (4)[4, 9, 16, 25]
console.log(calculate(num,cube)); ->(4) [8, 27, 64, 125]
console.log(calculate(num,add));-> (4) [4, 6, 8, 10]

This is it can you spot the differences between this code and above code which we have written.

• In the functional approach the code gets split into smaller piece of chunks or small piece of component which perform the functional part separating from the logic part of the program.
• By this the code becomes more user friendly and the logic part is separated from the function,which makes the debugging part more easier.
• Adding new functions are more simpler than before as just we have to focus on only writing pure functions as the rest will be taken care by the logic part and if needed also they can be modified easily.

Now it's time get into higher order function which are more powerful 🚀 than we think.We are performing all our logic in our calculate part , so what if i tell you that the calculate part is written already in JavaScript (in-built method) so we can just use it and see the real power of higher order function.

//this is the part we have taking about
const calculate = function(num,logic){
    const results = [];
    for( let i=0; i < num.length; i++) {
        results.push(logic(num[i]));
    }
    return results;
}

//using MAP  function 

const results = (num.map(square)); 
console.log(results); -> (4)[4, 9, 16, 25]

Let's see what map does in the above code

• The calculate function is a custom function which is almost similar to map function ,the map function create a new array and iterates through each of the elements and returns the ouput.

Its just one way of implementing map function , and there are much more possibility with map function which can be referred at MDN docs .

I hope this gives you an slight understanding about functional programming and the use of higher order functions.

Thanks for reading