Higher-order functions and callbacks

This chapter follows The this keyword.

A higher-order function takes a function as an argument, returns a function, or both. JavaScript treats functions like any other value, so higher-order style is the default in modern code—not an advanced pattern.

Functions as values

Function declarations and expressions produce callable values you can assign and pass around.

1
const double = (n) => n * 2;
2
const apply = (fn, x) => fn(x);
3

4
apply(double, 21); // 42

Named function expressions are useful for recursion (const fact = function fact(n) { ... }).

Callbacks

A callback is a function passed to another function to run later—on an event, when I/O completes, or for each collection element.

1
document.addEventListener('click', (event) => {
2
  console.log(event.type);
3
});

The callee controls when and with what arguments the callback runs. Error-first Node-style callbacks (err, result) => {} and Promise .then(fn) are the same idea with different conventions.

Array higher-order methods

Built-ins encode common loops as higher-order calls:

1
const ids = users
2
  .filter((u) => u.active)
3
  .map((u) => u.id);

These methods do not mutate the array (unless your callback mutates elements). For async work over collections, use for...of with await or Promise.all with map.

Returning functions (factories)

Higher-order functions often configure behavior by closing over parameters:

1
function multiplyBy(factor) {
2
  return (n) => n * factor;
3
}
4

5
const triple = multiplyBy(3);
6
triple(4); // 12

That pattern leads to currying, composition, and memoization in the next chapter.

Partial application versus bind

bind(null, arg1) fixes early arguments; a wrapper function can do the same with clearer types in TypeScript. Prefer small named functions when a one-off callback would be hard to test.

Next: Functional patterns in JavaScript.