16 Higher Order Function

A higher-order function is a function that takes one or more functions as arguments and/or returns a function as its result.

• These functions can be either named or anonymous functions.
• Functions can be assigned to variables in the same way how strings or arrays are handled.
• They can be passed into other functions as parameters or returned from them as well.

1. Basic Example

function printer(fn){
   fn();
}

function hello(){
    console.log("hello");
}

function hi(){
    console.log("hi");
}

printer(hello);
printer(hi);

Explanation

• This will print hello and hi
• The function that takes another function as argument is called higher order function
• printer is the high order function
• hello & hi are call back functions.

2. Without using HOF (Problem)

The below code has too much of boiler plate code.

• And doesn't follow DRY (don't repeat yourself) principle.

const radius = [1, 2, 3, 4];

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 calculateCircumference = function (radius) {
  const output = [];
  for (let i = 0; i < radius.length; i++) {
    output.push(2 * Math.PI * 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;
};


export function app() {
  console.log(calculateArea (radius));
  console.log(calculateCircumference (radius));
  console.log(calculateDiameter (radius));
}

3. Using HOF (Solution)

The below code is refactored using higher order functions.

const radius = [1, 2, 3, 4];

const area = (radius) => {
  return Math.PI * radius * radius;
};

const circumference = (radius) => {
  return 2 * Math.PI * radius;
};

const diameter = (radius) => {
  return 2 * radius;
};

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

export function app() {
  console.log(calculate(radius, area));
  console.log(calculate(radius, circumference));
  console.log(calculate(radius, diameter));
}

4. Similarity with Map

Map is an example of higher order function.

• Below we can see using the javascript map function
• Also we can see our custom implementation of the map function.
• Array.prototype will make the custom method available to all the arrays.
• This approach is also called pollyfills.

const radius = [1, 2, 3, 4];

const area = (radius) => {
  return Math.PI * radius * radius;
};

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

console.log(radius.map(area));
console.log(radius.calculate(area));