Explain Higher-Order Functions in JavaScript

A higher-order function takes a function as an argument, returns one, or both. The array methods are the ones you use daily. Why this reads better than a loop

All topics

17 / 100

Functionsintermediate

Higher-Order Functions

Functions that take other functions as arguments, return functions, or both — the foundation of functional-style JavaScript.

A higher-order function takes a function as an argument, returns one, or both.

A higher-order function is like a manager who doesn't do the specific task themselves but hands it off to whichever specialist (function) you give them — the manager (map/filter/reduce) still coordinates iterating over the whole team, but the actual per-item decision is entirely up to whichever specialist you plugged in.

Key Concepts

    [1, 2, 3].map(x => x * 2);          // takes a function
    const double = multiplyBy(2);       // returns a function

The array methods are the ones you use daily.

    map     transform each element       -> a new array, same length
    filter  keep the matching ones       -> a new array, shorter
    reduce  combine into a single value
    find    the first match, or undefined
    some    is any true
    every   are all true
    flatMap map, then flatten one level

    const orders = [{ total: 50 }, { total: 120 }, { total: 30 }];

    orders.filter(o => o.total > 40)
          .map(o => o.total)
          .reduce((sum, t) => sum + t, 0);   // 170

Why this reads better than a loop. Each step names what it does. A for loop with an accumulator and an if inside requires reading the body to discover it is filtering and summing.

forif

reduce is the general one. map and filter can both be written with it, which is why it takes a moment to learn and then covers the cases the others do not:

reducemapfilter

    // group by a key
    items.reduce((acc, item) => {
      (acc[item.type] ??= []).push(item);
      return acc;
    }, {});

Always pass the initial value. Without it, reduce uses the first element and throws on an empty array.

reduce

Returning a function is the other half.

    const multiplyBy = (n) => (x) => x * n;
    const double = multiplyBy(2);
    double(5);   // 10

The returned function closes over n. That is a closure, which is why the two topics are always taught together.

The practical judgement. Chaining is clear up to a point. Four chained methods over a large array make four passes and four intermediate arrays; a single loop makes one.

For a few hundred items that difference is irrelevant and readability wins. For a hot path over a million, measure it — and know that for...of is the faster option when it matters, not because loops are virtuous but because there is one pass and no allocation.

for...of

What the interviewer is probing.1. "What makes a function higher-order?" Probing: the definition. Stalls: "It is complex." Moves up: it takes a function as an argument or returns one — map, filter and setTimeout all qualify.

2. "Why prefer map and filter to a for loop?" Probing: the argument, honestly. Stalls: "They are faster." Moves up: they state intent and avoid index bugs; a plain loop can be faster on hot paths, so the reason is readability.

3. "What does reduce do that map and filter cannot?" Probing: the generality. Stalls: "It sums numbers." Moves up: it folds a collection into any shape — an object, a grouping, a single value — because the accumulator is arbitrary.

4. "When does chaining become a performance problem?" Probing: the trade. Stalls: "Never." Moves up: each call makes a new array, so several chained passes over a very large collection do more work than one loop.