Higher-Order Functions

1Definition

A higher-order function is any function that does at least one of:

1. Takes another function as an argument, or
2. Returns a function as its result.

Functions are first-class values in JavaScript — they can be stored in variables, passed around, and returned, exactly like numbers or strings. This is what makes higher-order functions possible.

function applyTwice(fn, value) {   // takes a function as an argument
  return fn(fn(value));
}
applyTwice(x => x * 2, 3); // 12

function multiplier(factor) {       // returns a function
  return x => x * factor;
}
const triple = multiplier(3);
triple(5); // 15

2Built-in Higher-Order Functions You Already Use

map, filter, reduce, forEach, sort (with a comparator), setTimeout, and addEventListener are all higher-order functions — they accept a callback function as an argument.

[1, 2, 3].map(n => n * 2);              // map is higher-order — takes a function
setTimeout(() => console.log("done"), 1000); // setTimeout is higher-order too

3Function Composition

Combining small, single-purpose functions into a pipeline is the most practical use of higher-order functions:

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const trim = s => s.trim();
const lower = s => s.toLowerCase();
const exclaim = s => s + "!";

const shout = pipe(trim, lower, exclaim);
shout("  HELLO  "); // "hello!"

pipe runs left to right; compose runs right to left — both are standard names in functional-programming-flavored JavaScript.

4Returning Functions: Configuration and Specialization

function createValidator(minLength) {
  return function (value) {
    return typeof value === "string" && value.length >= minLength;
  };
}

const isValidPassword = createValidator(8);
isValidPassword("short");     // false
isValidPassword("longenough"); // true

This pattern — a function that returns a specialized function — is the basis of currying, decorators, and middleware chains (Express middleware and Redux middleware both rely on this exact shape).

5Decorators (Wrapping Functions)

A higher-order function can wrap another function to add behavior without modifying its source:

function withLogging(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn(...args);
    console.log(`${fn.name} returned`, result);
    return result;
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(2, 3); // logs the call, then returns 5

This is the same principle behind memoize (Closures topic), debounce, and throttle.

6Debounce and Throttle — Practical Higher-Order Functions

function debounce(fn, delayMs) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delayMs);
  };
}

debounce returns a new function that resets its timer on every call, only firing fn once activity has paused — the standard fix for excessive input/resize event handling.

function double(x) { return x * 2; }
const result = [1, 2, 3].map(double); // same `double` function every time this line runs -> inlinable

function runTransform(arr, transformFn) {
  return arr.map(transformFn); // `transformFn` is a DIFFERENT function object on every call
}
runTransform(data1, x => x + 1);
runTransform(data2, x => x * 2);
runTransform(data3, x => x.toUpperCase());

⚠️ Common Pitfalls

1. Losing this inside a returned function — if the wrapped function relies on this, use fn.apply(this, args) or convert to arrow functions consistently (see the this keyword topic).
2. Over-composing for its own sake — a 6-function pipe chain that's only used once is often less readable than a plain sequence of statements; reserve composition for genuinely reused logic.
3. Forgetting closures persist state between calls — a decorator like debounce keeps timeoutId alive across every call via closure; creating a new debounced function on every render (e.g. inline in a React component) defeats the purpose because the closure resets each time.
4. Confusing "takes a callback" with "is asynchronous" — map/filter/sort are higher-order but fully synchronous; higher-order-ness and async-ness are unrelated concepts.

📋 Quick Reference

higher-order function = takes a function in, OR returns a function out (or both)
pipe(f, g, h)(x)  = h(g(f(x)))     — left to right
compose(f, g, h)(x) = f(g(h(x)))   — right to left

🎤 Interview Q&A

🛠️ Practice exercises

Each exercise is a file in this topic folder. Code exercises are self-checking: run them and make the checks pass.

Source: js_higher_order_functions_theory.md · generated by tools/build_lessons.py