What is a higher-order function?

In JavaScript, a higher-order function is a function that either takes one or more functions as arguments, returns a function as its result, or both. This concept is fundamental to functional programming paradigms and allows for greater abstraction, reusability, and composability of code.

Definition

At its core, a higher-order function treats functions as first-class citizens, meaning they can be assigned to variables, passed as arguments to other functions, and returned from functions. This capability is crucial for implementing powerful abstractions and creating more modular and declarative code.

Why Use Higher-Order Functions?

• Abstraction: They allow you to abstract common patterns of computation, making your code cleaner and easier to understand.
• Reusability: By separating the logic of *what* to do from *how* to do it, you can reuse the same higher-order function with different behaviors (the functions passed as arguments).
• Composability: Higher-order functions can be chained together, allowing complex operations to be built from simpler, well-defined functions.
• Flexibility: They enable more flexible and dynamic program behavior.

Examples in JavaScript

Functions that take other functions as arguments (Callback Functions)

Many built-in JavaScript array methods are excellent examples of higher-order functions. They iterate over an array and apply a provided callback function to each element.

Array.prototype.map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.

const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
// doubledNumbers is [2, 4, 6, 8]

const doubledNumbersArrow = numbers.map(num => num * 2);
// doubledNumbersArrow is [2, 4, 6, 8]

Array.prototype.filter(): Creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
// evenNumbers is [2, 4, 6]

const evenNumbersArrow = numbers.filter(num => num % 2 === 0);
// evenNumbersArrow is [2, 4, 6]

Array.prototype.reduce(): Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 10

const sumArrow = numbers.reduce((acc, curr) => acc + curr, 0);
// sumArrow is 10

Functions that return other functions (Function Factories/Closures)

A function can also generate and return another function. This pattern is often used for creating specialized functions or for maintaining state through closures.

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const multiplyByTwo = createMultiplier(2);
const multiplyByTen = createMultiplier(10);

console.log(multiplyByTwo(5));  // Output: 10
console.log(multiplyByTen(5)); // Output: 50

Key Takeaways

• A higher-order function either accepts a function as an argument, returns a function, or both.
• They are a cornerstone of functional programming in JavaScript.
• Common examples include map, filter, reduce, and custom function factories.
• They enhance code abstraction, reusability, and composability.