Higher-order functions

The big idea

A higher-order function is a function that works with other functions. It does at least one of these:

• It takes a function as an argument. An argument is a value you give a function when you call it.
• It returns a function as its result.

Some do both. There is no special syntax for this. It works because in JavaScript a function is a value, like a number or a string. You can keep a function in a variable, put it in an object, give it to another function, and call it later.

You have already used this idea in the Callbacks, Arrow functions, Closures, and map, filter & reduce lessons. This lesson puts those pieces together. It is the first lesson of the Functional programming module.

The lesson goes in this order:

1. Functions are values.
2. Passing a function into another function.
3. Getting a function back from another function.
4. Writing every step in a loop, or naming the jobs with array methods.
5. A second look at map, filter, and reduce.

Functions as values

When you write a function, you make a value. You can call that value with round brackets, but it is still a value. So these two lines do very different jobs:

1const double = n => n * 2;2 3applyToEach([1, 2, 3], double);  // pass the function value4applyToEach([1, 2, 3], double()); // call now, then pass the result

Line 1 makes a function called double. It takes a number n and returns n * 2.

Line 3 gives applyToEach the function itself. There are no call brackets after double. The helper keeps the function and calls it once for each item.

Line 4 has call brackets: double(). So double runs right away, before the helper starts, with no number. n is undefined, and undefined * 2 is NaN ("not a number"). The helper gets NaN. When it tries to call that, JavaScript throws a TypeError, because NaN is not a function.

Code like this often looks almost the same but means something different. The table below shows three of them. Read each row as: "when I write this, it means this, and I use it for this."

This small difference is the key to the whole lesson. Once you can hand a function to a helper, the helper can say: "I know how to repeat, wait, sort, or combine. You tell me what to do at each step."

A function that you pass into another function is called a callback. The two functions share the work:

• The higher-order function decides when to call the callback, and what to give it.
• The callback decides what happens each time it is called.

Try a helper called applyToEach. It takes a list of items and a callback. It goes through the items with a for...of loop, which runs once for each item. For each item it calls the callback and keeps what the callback returns. You can swap in a callback that doubles each number, turns it into a label, or checks if it is even.

1function applyToEach(items, fn) {2  const results = [];3  for (const item of items) {4    results.push(fn(item));5  }6  return results;7}8 9const numbers = [1, 2, 3];10applyToEach(numbers, double);11applyToEach(numbers, label);12applyToEach(numbers, isEven);

The array methods you know work the same way. map, filter, reduce, and sort all take a callback. So does addEventListener, which runs your function when something happens on the page, such as a click. These methods differ in two ways:

• What they give to the callback.
• What they do with the value the callback returns.

1const words = ["1", "2", "3"];2console.log(words.map(parseInt));3console.log(words.map(word => parseInt(word, 10)));

parseInt turns text into a whole number. It takes an optional second argument: the number base, such as 10 for normal numbers or 2 for binary.

Line 2 prints [1, NaN, NaN]. Here is why. map calls its callback as callback(item, index, array). So parseInt gets the index as its number base:

• parseInt("1", 0) gives 1. A base of 0 means "work it out", so it uses base 10.
• parseInt("2", 1) gives NaN. Base 1 doesn't exist.
• parseInt("3", 2) gives NaN. Base 2 only has the digits 0 and 1.

Line 3 fixes it with a small arrow function: word => parseInt(word, 10). Now parseInt only gets the word and the base 10, and it prints [1, 2, 3].

A higher-order function can also take a function and return a new one that does a little more. That new function is called a wrapper. It adds some work before or after the original function, like a gift wrap around a present. The present inside is unchanged.

const cart = {
  taxRate: 0.1,
  total(price, quantity) {
    return price * quantity * (1 + this.taxRate);
  }
};

function withLogging(fn) {
  return function (...args) {
    console.log("args", args.join(", "));
    const result = fn.apply(this, args);
    console.log("result", result);
    return result;
  };
}

cart.total = withLogging(cart.total);
console.log(cart.total(10, 2));

Here is the code, step by step:

1. Lines 1 to 6 make a cart with a tax rate of 0.1 and a total method. Inside the method, this means the cart, so this.taxRate is 0.1.
2. Line 9: ...args collects every argument the wrapper gets into one array, called args.
3. Line 10 prints the arguments.
4. Line 11 calls the original function with fn.apply(this, args). apply calls fn with the same this (the cart) and the same arguments.
5. Lines 12 and 13 print the result and return it.
6. Line 17 replaces cart.total with the wrapped version. Line 18 calls it.

It prints args 10, 2, then result 22, then 22. The original method still reads the cart's tax rate (10 × 2 × 1.1 = 22), and the wrapper returns its result unchanged.

function withTiming(fn, label) {
  return (...args) => {
    console.log(label + " start");
    const result = fn(...args);
    console.log(label + " end");
    return result;
  };
}

const saveProfile = withTiming(
  name => "saved " + name,
  "saveProfile",
);
console.log(saveProfile("Asha"));

withTiming prints saveProfile start, calls the original function, prints saveProfile end, and returns the result. So the last line prints saved Asha.

A real timing wrapper reads performance.now() before and after the call. That method returns the current time in milliseconds, so the wrapper can print how long the call took. Every wrapper follows the same rules:

• Add your work before or after the call.
• Call the original function once.
• Pass on all its arguments.
• Return its result.

If a wrapper forgets the last rule, every call through it returns undefined, and no error tells you why.

A higher-order function can also make a new function and return it. A function that does this is called a function factory. You call the factory once with a setting. It gives you back a function that you can call many times.

Step through the factory below. Pick a factor, then watch the returned function keep using that factor in later calls. The steps were recorded from the lesson's real functions. It is a guided replay, not the browser's own debugger.

1function makeMultiplier(factor) {2  return function (value) {3    return value * factor;4  };5}6 7const multiplier = makeMultiplier(3);Run8multiplier(4);9multiplier(10);

How can the returned function still read factor after makeMultiplier has finished? It is a closure: a function that remembers the variables around the place where it was made. JavaScript keeps factor alive because the returned function still needs it. The Closures and Closure patterns lessons explain how that memory works.

The block below shows four common functions that return functions:

1function makeMultiplier(n) {2  return value => value * n;3}4 5function makeCounter() {6  let count = 0;7  return () => {8    count += 1;9    return count;10  };11}12 13function once(fn) {14  let called = false;15  let result;16  return (...args) => {17    if (!called) {18      called = true;19      result = fn(...args);20    }21    return result;22  };23}24 25function withLogging(fn) {26  return value => {27    console.log("calling with", value);28    return fn(value);29  };30}

There are two ways to write the same job:

• Imperative code spells out every step: make a list, go through each item, check it, add it.
• Declarative code names the jobs you want done, such as "keep the paid orders", and lets a helper like filter do the steps.

Higher-order functions often make code more declarative. A chain of array methods, where each method passes its result to the next, is called a pipeline.

Below, the same small report is written both ways. Both keep the paid orders, make a label for each, and add up their totals. The lab also counts how many times each version visits an order. That count shows that the declarative version doesn't always do less work.

1const paid = orders.filter(order => order.paid);2const paidLabels = paid.map(order => order.id + ": $" + order.total);3const total = paid.reduce((sum, order) => sum + order.total, 0);4const steps = orders.length + paid.length + paid.length;5 6console.log(paidLabels);7console.log(total);8console.log(steps);

Sometimes a plain loop is the clearer choice. This loop looks for the first price above 5:

const prices = [4, 7, 6];
let firstExpensive;

for (const price of prices) {
  if (price > 5) {
    firstExpensive = price;
    break;
  }
}

console.log(firstExpensive);

break stops a loop at once. The loop finds 7, keeps it, and stops, so it never looks at 6. It prints 7.

You could write prices.filter(price => price > 5)[0] instead. It gives 7 too. But it checks every price and builds a new array first, and the code doesn't show that you only wanted the first match.

Choose a loop when you need:

• to stop early with break,
• several variables that change as you go,
• many branches of if and else, or
• code that runs very often, where extra arrays slow things down.

Choose map, filter, and reduce when their names make the job easier to read.

In the end, pick the version a teammate can safely change next month. For "keep, change, combine", a pipeline reads like the rule itself. For many branches or stopping early, a loop shows what really happens.

The earlier array lesson showed what each of these methods does. Now look at them as higher-order functions. Each one takes a callback:

• map calls its callback for each item and returns a new array of the results.
• filter takes a callback that returns true or false. It returns a new array of the items where the callback returned true.
• reduce takes a callback that combines items one by one into a single result. The result so far is called the accumulator. reduce returns the final accumulator.

1const orders = [2  { status: "paid", total: 18 },3  { status: "draft", total: 9 },4  { status: "paid", total: 24 }5];6 7const grouped = orders.reduce((groups, order) => {8  groups[order.status] = (groups[order.status] ?? 0) + 1;9  return groups;10}, {});11 12const mapped = [1, 2, 3].reduce((result, n) => {13  result.push(n * 2);14  return result;15}, []);16 17const filtered = [1, 2, 3, 4].reduce((result, n) => {18  if (n % 2 === 0) result.push(n);19  return result;20}, []);21 22console.log(grouped);23console.log(mapped);24console.log(filtered);25console.log([].reduce((a, b) => a + b));

Here is what each part does:

1. Lines 7 to 10 count the orders by status. The accumulator groups starts as an empty object, {}. ?? means "use 0 if there is no count yet". Line 22 prints { paid: 2, draft: 1 }.
2. Lines 12 to 15 copy what map does. They start with an empty array and push each number doubled. Line 23 prints [2, 4, 6].
3. Lines 17 to 20 copy what filter does. They push only the even numbers. Line 24 prints [2, 4].
4. Line 25 calls reduce on an empty array with no starting value. It throws an error.

So reduce can do the job of map and filter. That is good to know, but it is harder to read. When map or filter already says what you mean, use it.

Remember what each method gives its callback. Array callbacks get the item, the index, and the array. That is why arr.map(parseInt) goes wrong. Other methods give something else. The callback for sort gets two items, (a, b), and returns a number that says which comes first.

Where you’ll use this

You will meet higher-order functions in everyday frontend code:

1button.addEventListener("click", handleSave);2 3const visibleNames = users4  .filter(user => user.active)5  .map(user => user.name);6 7app.use(withLogging(authMiddleware));8 9<ProductList10  products={products}11  onSelect={product => setSelected(product.id)}12/>;

• Line 1: an event handler. The browser keeps handleSave and calls it when the click happens.
• Lines 3 to 5: an array pipeline. It keeps the active users, then takes their names for the page.
• Line 7: a wrapper. On a server, middleware is a function that runs before the code that answers a request. Wrappers like withLogging add logging, login checks, timing, or retries around it.
• Lines 9 to 12: a React-style component. It gets a callback, onSelect, from its parent. When the user picks a product, the component calls onSelect. It doesn't need to know what the parent does next.

Common misconceptions

The table below keeps four similar ideas apart. Read each row as: "this idea is this, it looks like this in code, and this is the mistake to avoid."

Pick your answer first, then read every explanation. The wrong answers are mistakes people really make.

Key takeaways

• A higher-order function takes a function as an argument, returns a function, or does both.
• Pass fn when a helper should call it later. fn() calls it now.
• A returned function remembers the factory's settings. That memory is a closure.
• A pipeline can make the jobs easy to read. A loop is still fine when it is clearer or faster.
• Array callbacks get the item, the index, and the array. That is why map(parseInt) goes wrong.
• Give reduce a starting value, especially when the array might be empty.

Up next: Pure functions & side effects. You will learn to tell apart functions that always give the same result for the same input from code that changes things outside itself.