Understanding Higher-Order Functions in JavaScript

JavaScript supports functional programming because it treats functions as first‑class citizens, allowing them to be passed as arguments, returned from other functions, and assigned to variables.

First‑class functions mean that a function is an object; you can add properties (though it is discouraged) and use them just like any other value.

Examples include assigning a function to a variable, passing a function as a callback, and returning a function from another function.

Higher‑Order Functions

A higher‑order function is a function that either takes another function as an argument or returns a function. Common built‑in higher‑order functions in JavaScript are Array.prototype.map , Array.prototype.filter and Array.prototype.reduce .

Array.prototype.map

The map() method creates a new array by calling a provided callback on each element of the original array. The callback receives three arguments: element , index , and array .

Example without a higher‑order function (illustrated in an image):

Example using map() (illustrated in an image):

Using arrow‑function syntax makes it even shorter:

Array.prototype.filter

The filter() method creates a new array containing all elements that pass the test implemented by the provided callback.

Example without a higher‑order function (image):

Example using filter() (image):

Array.prototype.reduce

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It takes a reducer callback and an optional initialValue .

Example summing an array with reduce() (image):

Providing an initial value (image):

Without a higher‑order function the same task requires more verbose looping (image):

Using higher‑order functions makes the code clearer and more concise.

Creating Your Own Higher‑Order Function

Suppose JavaScript lacked a native map method. You can implement one yourself:

function mapForEach(arr, fn) {
  const newArray = [];
  for (let i = 0; i < arr.length; i++) {
    newArray.push(fn(arr[i]));
  }
  return newArray;
}

Calling mapForEach with a callback that returns the length of each string converts a string array into an array of lengths (illustrated in an image).

Conclusion

We have explored what higher‑order functions are, examined built‑in examples like map , filter , and reduce , and learned how to craft our own higher‑order functions to write cleaner, more expressive JavaScript code.