Higher order function in JavaScript

A function is a reusable piece of code introduced to avoid repetitive code and improve code readability and quality. In Javascript, functions are first-class citizens. Here we can take a function as an argument or return a function. This ability to accept and return a function makes it first class citizens in JavaScript. Higher order functions are functions that take a function as parameter and return a funcction as output.

Function as first-class citizens:

Some operations performed on functions in javascript which make it feel like first-class citizens are

Store function in a variable.
Store function in array.
Accept another function as argument or as a return from a function.
Set a function as object property.

Higher order functions:

A function which accepts another function as an argument or as a return from a function is higher order function.

Function that takes another function as argument:

A function which can be passed as an argument to another function is called callback functions. In javascript functions are objects, so they can be passed as an argument.

function getname(myname) {
  // Invoke the passed function
  myname();
}

// Invoke the function by passing a function as an argument
getname(function(){
  console.log('Abaython');
});

Output:Abaython

Return function:

Here a function is returned from a function.

// Define a function that returns a function
function returnFunc() {
  return function() {
    console.log('Abaython');
  }
}

// Take the returned function in a variable.
const fn = returnFunc();
// Now invoke the returned function.
fn(); // Abaython
// Alternatively 
returnFunc()(); // Abaython

Output:

Abaython

In JavaScript we have forEach(), map(), reduce() and filter() functions which are built-in higher order functions.

.forEach():

Iterate through an array of elements. It is used only with arrays. It takes a callback function with elements, index and array.

let sum = 0;
const numbers = [10, 20, 30, 40, 50];
numbers.forEach(num => sum+=num)
console.log(sum);

Output: 150

map():

Iterate an array and modify the elements of array. It takes a callback function with elements, index, array parameter and return a new array.

const num = [10, 20, 30, 40, 50]
const double = num.map((num) => num + num)
console.log(double)

Output: [ 20, 40, 60, 80, 100 ]

filter():

filter a set of elements which satisfies a certain condition and return a new array.

const num = [10, 20, 30, 40, 50]
const num1 = num.filter((num) => num>30)
console.log(num1)

Output: [ 40, 50 ]

reduce():

The reduce method executes the callback function on each member of the calling array which results in a single output value. The reduce method accepts two parameters: The reducer function (callback) and an optional initialValue.

The callback function in turn accepts the following four parameters:

Accumulator
Current value
Current index
Source array

const num = [10, 20, 30, 40, 50]
const sum = num.reduce((acc, cur) => acc + cur, 0)
console.log(sum)

Output: 150

In a nutshell, higher order function are helpful in making a cleaner, readable and quality code.