What is a higher-order function?

A function that takes a function as an argument, returns a function, or both.

// takes a function
[1, 2, 3].map((n) => n * 2);

// returns a function
const multiplyBy = (n) => (x) => x * n;
const double = multiplyBy(2);

// both
const withLogging = (fn) => (...args) => {
  console.log(args);
  return fn(...args);
};

This is possible because functions in JavaScript are first-class values — you can assign them to variables, put them in arrays, pass them around and return them, exactly like numbers or strings.

Why they matter

They let you abstract the pattern of an operation and leave the specific behaviour to the caller. Compare:

// without
const result = [];
for (const u of users) if (u.active) result.push(u.name);

// with
const result = users.filter((u) => u.active).map((u) => u.name);

The second states what you want; the first states how to get it and leaves the reader to infer the intent.

Where you already use them

map, filter, reduce, sort, forEach, addEventListener, setTimeout, Promise.then, and every React hook that takes a callback. Middleware, decorators, debounce and throttle are all higher-order functions that return one.

function debounce(fn, delay) {       // takes and returns a function
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Two practical notes

A returned function usually closes over variables from the outer call — higher-order functions and closures nearly always appear together.

And each call produces a new function identity, which matters for removeEventListener and for React memoisation: debounce(fn, 300) inside a render creates a different debounced function every time.