What Makes a Function Higher-Order?

A higher-order function is one that takes a function as an argument, returns a function, or does both of those things. That is the whole definition, and it is worth stating precisely, because people sometimes use the term loosely for any function that is passed around.

Taking a function as an argument is the most common case, and the array methods are all built this way. The map method takes a function and applies it to every element. The filter method takes a function that decides whether an element is kept. The sort method takes a comparison function. The reduce method takes a function that accumulates a result. The setTimeout function takes a function and calls it later, and event listeners take a function and call it when the event happens.

Returning a function is the other case, and it is the more interesting one when you want to compose behaviour together. A function that returns a function lets you build a pipeline. You call it once with a behaviour, and you get back something that you can call later with a value. That is how decorators, middleware chains, and currying are built.

Doing both at the same time is also common. A function that takes a behaviour and returns a new function that takes a value is a decorator, and the next question shows one of those in full.

The practical value of recognising higher-order functions is that they are the backbone of functional style. Because behaviour is treated as data, you can pass it around, store it, combine it, and test it in isolation. The cost is that code with several layers of callbacks is harder to read, which is why teams usually keep higher-order functions shallow and give them good names.

Composition works best with functions that take one value and return one value. A function that returns a function is the building block, because it takes a list of steps and hands back a single function that runs them in order.

function pipe(steps) {
  return function (input) {
    let value = input;
    for (const step of steps) {
      value = step(value);
    }
    return value;
  };
}

function double(n) {
  return n * 2;
}

function addTen(n) {
  return n + 10;
}

function toText(n) {
  return 'value: ' + n;
}

console.log(pipe([double, addTen])(5));
console.log(pipe([double, addTen, toText])(5));

The loop inside pipe is the whole trick. It starts with the input and threads it through each function in turn, so the result of one becomes the input of the next. The order matters, and reversing it changes the meaning, which is worth saying out loud in an interview.

A decorator uses the same idea in a different shape. The outer function takes a function and returns a function, so anything that can be wrapped can be extended with logging, timing, validation, or caching without touching the original function.

function withLogging(fn) {
  return function (input) {
    console.log('input:', input);
    const output = fn(input);
    console.log('output:', output);
    return output;
  };
}

console.log(withLogging(double)(4));

Two caveats are worth knowing. The functions must take a single value for this to compose cleanly, and each step must return a value rather than just logging it, otherwise the chain has nothing to pass on. A pipeline like this is also easy to write and easy to misuse. If one step throws, the rest never run, and there is no error handling in the chain at all unless you add it yourself.