Suggest an edit

Improve this article

Refine the answer for “Higher-order function”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A higher-order function is a function that takes another function as an argument or returns a function as its result.** Either one of those two properties is enough for a function to count as higher-order.

## Theory

### TL;DR

- A higher-order function takes a function as an argument or returns a function.
- This works because functions in JavaScript are first-class objects.
- A function can be passed as a value, stored in a variable and returned from another function.
- Built-in examples: `map`, `filter`, `reduce`, `setTimeout`, `addEventListener`.
- They give flexibility, logic reuse and abstractions over collections and events.
- They are the main tool of functional programming.

### Quick example

```javascript
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// 0
// 1
// 2
```

`repeat` is a higher-order function because it calls the function `action` that was passed in.

### Functions as first-class objects

In JavaScript functions are **first-class citizens**, which means you can:

- pass them around as values,
- store them in variables,
- return them from other functions.

Functions that use other functions in that way are exactly what we call **higher-order** functions.

```javascript
const greet = function (name) {   // store it in a variable
  return `Hello, ${name}`;
};

const actions = [greet];          // put it in an array
console.log(actions[0]('Maria')); // Hello, Maria
```

### Taking a function as an argument

```javascript
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// 0
// 1
// 2
```

The function passed in is usually called a callback. `repeat` itself knows nothing about what `action` will do: it is only responsible for the repetition. That separation of responsibilities is exactly what makes the code flexible.

### Returning a new function

```javascript
function multiplier(factor) {
  return function (num) {
    return num * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10
```

`multiplier` is a higher-order function because it returns another function. The returned function remembers `factor` thanks to the closure, so `double` always multiplies by 2, while `multiplier(10)` produces an independent function that multiplies by 10.

### Built-in examples in JavaScript

Many array methods are higher-order functions:

```javascript
[1, 2, 3].map(x => x * 2);            // takes a function
[1, 2, 3].filter(x => x > 1);         // takes a function
[1, 2, 3].reduce((a, b) => a + b, 0); // takes a function
```

The same is true of browser and platform APIs: `setTimeout(fn, 0)`, `addEventListener('click', fn)`, `promise.then(fn)`, `arr.sort(compareFn)`. All of them accept a function and decide when and with which arguments to call it.

### What they are for

- They increase the **flexibility and reusability of code**: one generic function serves many scenarios.
- They let you build **abstractions**, for example over collections, events or retries.
- They are the main tool of **functional programming**.

| Property | Description |
| --- | --- |
| What it does | Takes or returns functions |
| Examples | `map`, `filter`, `reduce`, `setTimeout`, `addEventListener` |
| Benefits | Logic reuse, more compact code |
| Key idea | Functions are data just like numbers or strings |

> A higher-order function is a function that **treats other functions as data**: it takes them as arguments or returns them as a result.

### Common mistakes

- **Calling the function instead of passing it.** `setTimeout(sayHi(), 1000)` passes the *result* of the call, not the function itself; the correct form is `setTimeout(sayHi, 1000)`.
- **Passing a method and losing `this`.** `element.addEventListener('click', obj.handle)` loses the context; you need `obj.handle.bind(obj)` or an arrow wrapper.
- **Confusing a callback with a higher-order function.** The higher-order one is the function that *accepts* the callback, not the callback itself.
- **Passing `parseInt` straight into `map`.** `['1','2','3'].map(parseInt)` gives `[1, NaN, NaN]`, because `map` also passes the index, which becomes the radix.
- **Thinking any function with an object argument is already higher-order.** The value has to be a function, not ordinary data.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts674 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.