What is a higher-order function?

Question

IT Interview Practice · Accepted Answer

A **higher-order function** is a function that does at least one of: **takes a function as an argument**, or **returns a function**. They're possible because functions are *first-class values* in JS (you can pass them around like any value).

## Taking a function

```js
[1, 2, 3].map(n => n * 2);        // map takes a function
button.addEventListener("click", handler); // so does addEventListener
setTimeout(() => doThing(), 1000);
```

## Returning a function (often using a closure)

```js
function multiplier(factor) {
  return n => n * factor;  // returns a function that remembers `factor`
}
const double = multiplier(2);
const triple = multiplier(3);
double(5); // 10
triple(5); // 15
```

Here `multiplier` builds specialized functions from a general one — a closure captures `factor`.

## A practical example: a logging wrapper

```js
function withLogging(fn) {
  return (...args) => {
    console.log(`calling with`, args);
    const result = fn(...args);
    console.log(`result`, result);
    return result;
  };
}
const loggedAdd = withLogging((a, b) => a + b);
```

## Why it matters

Higher-order functions make code **declarative and reusable**.

They underpin array methods (`map`/`filter`/`reduce`), event handling, middleware, decorators, currying, and React patterns (HOCs, custom hooks).

Instead of writing the same loop logic repeatedly, you pass the *behavior* as a function.

Taking a function

Returning a function (often using a closure)

A practical example: a logging wrapper

Why it matters

Related questions