What Are Higher-Order Functions in JavaScript?

What Are Higher-Order Functions in JavaScript?

A higher-order function is a function that takes a function as an argument, returns a function, or both. This is possible because functions are first-class citizens in JavaScript.

Functions That Take Functions (Callbacks)

[1, 2, 3].map((n) => n * 2);       // [2, 4, 6]
[1, 2, 3].filter((n) => n > 1);    // [2, 3]
[1, 2, 3].reduce((a, b) => a + b); // 6
``
`map`, `filter`, and `reduce` are higher-order functions: they take a callback.

### Functions That Return Functions (Factories)

```js
function multiplier(factor) {
  return (n) => n * factor;
}
const double = multiplier(2);
double(5); // 10
``
`multiplier` is a higher-order function: it returns a new function.

### Both

```js
function compose(f, g) {
  return (x) => f(g(x));
}
const addOne = (n) => n + 1;
const double = (n) => n * 2;
const addOneThenDouble = compose(double, addOne);
addOneThenDouble(5); // 12
``
`compose` takes two functions and returns a new function.

### Why Higher-Order Functions Matter

- **Abstraction**: hide details, express intent.
- **Reusability**: write one function, use it with many callbacks.
- **Composition**: chain small functions into complex pipelines.
- **Functional programming**: pure functions, immutability, composition.

### Common Built-in HOFs

- Array: `map`, `filter`, `reduce`, `forEach`, `find`, `some`, `every`, `sort`, `flatMap`.
- Function: `bind`, `call`, `apply`.
- Timers: `setTimeout`, `setInterval` (take callbacks).
- Promise: `then`, `catch`, `finally`.

### The Takeaway

A higher-order function takes or returns a function. `map`/`filter`/`reduce` take callbacks. `multiplier`/`compose`/`curry` return functions. HOFs enable abstraction, reusability, composition, and functional programming.