What Is a Higher-Order Function in JavaScript?

What Is a Higher Order Function?

A Higher Order Function is a function that can <span class="highlight">accept another function as a parameter</span> or <span class="highlight">return a function as its result</span>. Higher Order Functions are a common programming technique in functional programming that help reduce code duplication, increase code reusability, and improve code maintainability.

This is a concept in functional programming, not just in JavaScript, and is supported by many programming languages, such as Python and Swift.

Its importance lies in its ability to improve code modularity and maintainability, and is commonly applied in various contexts, including:

1. Wrapping callback functions: Callback functions can be passed as parameters to another function to achieve customized behavior.
2. Abstracting operations: Higher order functions can be used as an abstraction layer for encapsulating operations, such as implementing filtering and transformation.
3. Function composition: Higher order functions can be used to combine multiple functions to create new ones.

A Examples of Higher Order Function

In JavaScript, some of the commonly used built-in methods are actually higher order functions. Let's take Array.prototype.filter() as an example, and create a new higher order function.

The native Array.prototype.filter() method can filter elements in an array that meet certain conditions and return a new array.

In the following example, evenNumber is a callback function passed as a parameter to the filter function, and the result is returned.

const numbers = [1, 2, 3, 4, 5];
const evenNumber = (item) => item % 2 === 0;
const newNumbers = numbers.filter(evenNumber);
console.log(newNumbers); // [2, 4]

Now, let's use a higher order function to write a simple myFilter method that works similarly to the native Array.prototype.filter() method.

In the following code example, the myFilter higher order function accepts a callback function as a parameter and ultimately returns a new filtered array.

function myFilter(fn, arr) {
  const filteredArray = [];

  for (let i = 0; i < arr.length; i++) {
    if (fn(arr[i])) {
      filteredArray.push(arr[i]);
    }
  }

  return filteredArray;
}

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = myFilter((x) => x % 2 === 0, numbers);
console.log(evenNumbers);

Bonus Questions：What Are First-class Functions?

When discussing higher order functions, the term "first-class functions" is often brought up. "First-class functions" and "higher order functions" are related but not entirely the same concepts.

A programming language is said to have first-class functions when functions can be treated as variables and can be inputted or outputted like any other variable in that language. Most modern programming languages support first-class functions, including JavaScript, Python, Scala, and others.

Higher order functions, on the other hand, refer to functions that can receive a function as a parameter or return a function as a return value.