Higher Order Functions in JS

Write a snippet of functions to calculate area, circumference and diameter of the circle.

• without higher order function (repetitive code):

const radius = [2,3,4,5,6,7];
let output = [];

const area = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
    output.push(Math.PI*radius[i]*radius[i]); //Area = PI*radius*radius
  }
  return output;
}
const circumference = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
    output.push(2*Math.PI*radius[i]);
  }
  return output;
}
const diameter = function(radius) {
  output = [];
  for(i=0;i<radius.length;i++){
    output.push(2*radius[i]);
  }
  return output;
}
console.log(area(radius));
console.log(circumference(radius));
console.log(diameter(radius));

If we saw the above code, area, circumference and diameter functions are almost same except that maths formula. so we make that as a generalized function using higher order functions.

---

• with higher order function (function that takes another functions as an argument or returns a function)

const radius = [2,3,4,5,6,7];
let output = [];

const area = function(value) {
    return Math.PI*value*value;
}

const circumference = function(value) {
    return 2*Math.PI*value;
}

const diameter = function(value) {
    return 2*value;
}

const calculate = function(radius, logic) {
    output = [];
  for(i=0;i<radius.length;i++){
    output.push(logic(radius[i]));
  }
  return output;
}

console.log(calculate(radius, area));
console.log(calculate(radius, circumference));
console.log(calculate(radius, diameter));

Here we are creating one generalized function , that will accept another function as a input parameter (Higher Order function).

---

• with ES6 feature Map. In the Above section , we created higher order function to perform the operation, and we can achieve the same thing by using the exisiting javascript function called "Map".

const radius = [2,3,4,5,6,7];

const area = function(value) {
    return Math.PI*value*value;
}

const circumference = function(value) {
    return 2*Math.PI*value;
}

const diameter = function(value) {
    return 2*value;
}

console.log(radius.map(diameter))

---

• Cloning of Map function using higher order function. (Map Polyfill). Like Map, we can also create our own prototypes and operations using higher order functions like below.

const radius = [2,3,4,5,6,7];
let output = [];

const area = function(value) {
    return Math.PI*value*value;
}

const circumference = function(value) {
    return 2*Math.PI*value;
}

const diameter = function(value) {
    return 2*value;
}

Array.prototype.calculate = function(logic) {
    output = [];
  for(i=0;i<this.length;i++){
    output.push(logic(this[i]));
  }
  return output;
}

console.log(radius.map(area))  //default js function
console.log(radius.calculate(area)); //cloned the map function

Comments

[Umashankar S]

Yes, That is correct. we should not touch the Array prototypes (we should not mutate that).
But Just I'm explaining that how we can create our own functions like maps using the Higher order functions. Yes, we can use the modern arrow functions , instead of normal functions.

Thanks for your suggestions :)

[𒎏Wii 🏳️‍⚧️]

All I see is a bunch of examples you could find on google without explaining anything 🤔