Understanding Higher Order Functions in JavaScript

•4 min read•••• views

In JavaScript, functions are values(first-class citizens). This means that they can be assigned to a variable and/or be passed as arguments and can also be returned from another function.

These features or abilities open the door for various types of functions like, First-class functions, Callback functions, Higher-order functions, Anonymous functions and more.

const numbs = [2, 4, 5, 7, 1]
 
// First-class and Anonymous function
const incr = n => console.log(n + 1)
 
// Higher-Order function with Callback function
numbs.forEach(incr)
// 3
// 5
// 6
// 8
// 2
const numbs = [2, 4, 5, 7, 1]
 
// First-class and Anonymous function
const incr = n => console.log(n + 1)
 
// Higher-Order function with Callback function
numbs.forEach(incr)
// 3
// 5
// 6
// 8
// 2

Having a clear and better understanding of how Higher-Order Array functions work can save you a lot of time and make your logical implementation seamless.

🤔 What actually is an Higher-Order Function?

An Higher-Order Function is a function that will at least :

The function that is passed as an argument to the higher-order function is known as a Callback Function, because is it, to be 'called-back' by the higher-order function at a later time.

The term Callback Function keeps popping up often in JavaScript World, so it is crucial that you understand it!

Examples

Let's look at a simple example :

const success = s => console.log(s, ": Success") // log success message
const error = s => console.error(s, ": Error") // log error message
 
const notify = (status, cb) => {
  // Higher-Order Function
  const message = "Notification was " + status
  cb(message) // callback call
}
 
notify("Sent", success) // Notification was Sent : Success
notify("Not Sent", error) // Notification was Not Sent : Error
notify("Sent, but didn't reach", error) // Notification was Sent, but didn't reach : Error
const success = s => console.log(s, ": Success") // log success message
const error = s => console.error(s, ": Error") // log error message
 
const notify = (status, cb) => {
  // Higher-Order Function
  const message = "Notification was " + status
  cb(message) // callback call
}
 
notify("Sent", success) // Notification was Sent : Success
notify("Not Sent", error) // Notification was Not Sent : Error
notify("Sent, but didn't reach", error) // Notification was Sent, but didn't reach : Error

Above is an example to notify success and error notification messages.

The function notify() is an higher-order function because it takes a callback function as its second argument. The two functions success() and error() are used as callbacks for various status messages.

You can notice that when we call the notify() function, we are passing the respective callback function, which will be called-back later within the higher-order function.

Note: Callbacks in JavaScript are often referred to as cb in parameters.

Now Let's look at a simpler implementation of the forEach() Array method, which will perform the callback on each element of the array we pass.

const numbs = [5, 9, 10, 1] // Array of numbers
 
const addTwo = (n, i, arr) => {
  arr[i] = n + 2 // add 2 to current iteration element
}
 
const forEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) cb(arr[i], i, numbs) // callback call with: current element, index and array itself.
}
 
forEach(numbs, addTwo) // adds 2 to every element in numbs array
forEach(numbs, n => console.log(n)) // arrow function as callback: logs all the elements
// 7
// 11
// 12
// 3
const numbs = [5, 9, 10, 1] // Array of numbers
 
const addTwo = (n, i, arr) => {
  arr[i] = n + 2 // add 2 to current iteration element
}
 
const forEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) cb(arr[i], i, numbs) // callback call with: current element, index and array itself.
}
 
forEach(numbs, addTwo) // adds 2 to every element in numbs array
forEach(numbs, n => console.log(n)) // arrow function as callback: logs all the elements
// 7
// 11
// 12
// 3

In the above example we've built our own simpler version of the Array.forEach() method that performs a certain operation specified by the callback for every element in the Array.

At every iteration we pass the current value, current index and the array that's being operated, into the callback.

When we call the forEach() for the first time with the callback function addTwo(), it adds 2 to the current iteration element and stores it back in the array.

At the second call of our forEach() higher-order function, we've directly defined an arrow function(() => {}) into the argument as the callback function; which just logs the current iteration element.

This ought to give you a basic understanding of what higher-order functions and callback functions are.

Thank you for reading my blog. Let's connect on Twitter!

•••

cd ..

Subscribe for updates • Discuss on Twitter • Suggest Change