DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Higher Order Functions in JS
Umashankar S
Umashankar S

Posted on • Updated on

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));
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
lukeshiru profile image
Luke Shiru

A few things:

  • You should avoid mutations of the native objects prototypes, such as Array. So to any junior reading this: Avoid code like the last example.
  • Your examples are mutating output, ideally that output variable should only live inside calculate.
  • Your first example of HOC could use some modernization, and it actually doesn't need calculate, you can just use the native Array.prototype.map:
const radiuses = [2, 3, 4, 5, 6, 7];

const area = radius => Math.PI * radius ** 2;
const circumference = radius => Math.PI * diameter(radius);
const diameter = radius => 2 * radius;

console.log(radiuses.map(area));
console.log(radiuses.map(circumference));
console.log(radiuses.map(diameter));
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
 
umashankar_s profile image
Umashankar S • Edited on

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

Collapse
 
darkwiiplayer profile image
Info Comment hidden by post author - thread only accessible via permalink
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

All I see is a bunch of examples you could find on google without explaining anything πŸ€”

Some comments have been hidden by the post's author - find out more

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt β€” available in multiple colors.