Higher order functions

Understanding Higher order functions helps in understanding many other interesting concepts in JavaScript for example closure.

function multiplyBy2(num){
    return num*2;
}

function multiplyBy3(num){
    return num*3;
}

function multiplyBy4(num){
    return num*4;
}

In the above case, just the number with which it is multiplied is changing. Can we somehow simplify it? -> yes

function multiply(num, multiplyWith){
    // when we call the function we can pass multiplyWith as 2, 3, 4
    return num*multiplyWith;
}

Now, let us look at another scenario

// code snippet 1
function add2(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] + 2);
  }
  return output;
}
const myArray = [1, 2, 3];
const result = add2(myArray);

// code snippet 2
function multiplyBy2(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] * 2);
  }
  return output;
}
const myArray = [1, 2, 3];
const result = multiplyBy2(myArray);

// code snippet 3
function divideBy2(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] * 2);
  }
  return output;
}
const myArray = [1, 2, 3];
const result = divideBy2(myArray);

In the above case, the operation to be performed is changing and rest is same. Can we simplify it? -> yes

function operationOnArray(array, instructions) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(instructions(array[i]));
  }
  return output;
}
function add2(input){
    return input+2;
}
function multiplyBy2(input) {
  return input * 2;
}
function divideBy2(input) {
  return input / 2;
}
const result = operationOnArray([1, 2, 3], add2);
const result = operationOnArray([1, 2, 3], multiplyBy2);
const result = operationOnArray([1, 2, 3], divideBy2);

Here we are passing in the operation to be performed on the array elements. Now, you might get a question. Are we not doing the same thing as previous but by just passing the operation in terms of functions.

Here the operations like add2, multiplyBy2, divideBy2 are simple codes and might not be used by other functions, But in general, when we write production code, it may happen that operation logic is little tricky and can we used by other functions as well. So we are following the principle DRY (Don't Repeat Yourself)

So passing functions in JavaScript is possible because functions are treated as first class objects.

What is this have to do with Higher Order Functions?

• If a function accepts another function as an parameter or returns a function is Higher Order Function.

The function that is passed as an argument to a function is called callback

Now, let us see an example where function returns another function

function user (){
 let usersLoggedInDevicesCount = 0;
 function login (){ usersLoggedInDevicesCount ++; }
 return login;
}
const someUser = user();
someUser(); // usersLoggedInDevicesCount value will be 1
someUser(); // usersLoggedInDevicesCount value will be 2

Consider a simple login feature where the website wants to know number of devices a particular user has logged in.

This is also called as closure.