Higher-order functions

The big idea

A higher-order function is a function that works with other functions. More precisely, it either takes a function as an argument, returns a function, or both. This is not a special syntax feature. It works because JavaScript treats functions as values: you can store them in variables, put them in objects, pass them around, and call them later.

You have already met the idea in the Callbacks, Arrow functions, Closures, and map, filter & reduce lessons. This lesson ties those pieces together at the start of the Functional programming module.

We will move from intuition to precision: first functions as values, then callbacks, then factories that return functions, then the practical difference between imperative loops and declarative pipelines.

Functions as values

A function declaration or function expression creates a value. The value is callable, but it is still a value. That means 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

The first call gives applyToEach the function so the helper can call it once per item. The second line tries to run double immediately, before any item exists. In real code that usually means a missing argument, a surprising result, or a runtime error.

This tiny distinction is the doorway to higher-order functions. Once you can pass behavior around, a helper can say, “I know how to repeat, wait, wrap, sort, or combine. You tell me what to do at the important moment.”

A function passed into another function is usually called a callback. The higher-order function decides when to call it and what arguments to provide. The callback decides the custom behavior.

Try one helper named applyToEach. It always loops through the same items, but you can swap in a callback that doubles numbers, labels them, or checks whether they are 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);

This is the same principle behind array methods. map, filter, reduce, sort, and DOM event methods all accept callbacks. They differ in what they pass to the callback and what they do with the return value.

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

The first log prints [1, NaN, NaN]. Why? map calls the callback as callback(element, index, array), and parseInt reads its second argument as the number base. So it runs like parseInt("2", 1) and parseInt("3", 2), which are not useful parses. Wrap it: word => parseInt(word, 10).

Higher-order functions can also create and return functions. These are often called function factories. You call the factory once with settings, and it gives you back a function you can reuse many times.

Step through the factory below. Change the factor, then watch the returned function keep using that factor in later calls. This replay is recorded from the lesson’s real functions; it is a guided trace, not a browser engine debugger.

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

The closure is the reason the returned function can still read factor. The outer call has finished, but JavaScript keeps the lexical environment alive because the returned function needs it. The Closures and Closure patterns lessons go deeper into that memory model.

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}

Higher-order functions often make code more declarative. Imperative code describes every mechanical step. Declarative code names the desired transformations and lets trusted helpers handle the repetition.

Compare the same small report two ways: keep paid orders, format labels, and total their prices. The counted visits are deliberately visible so you do not confuse “more declarative” with “always fewer operations.”

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);

Use the version your teammate can safely change next month. For a straight “keep, transform, combine” flow, a pipeline reads like the business rule. For nested branches, breaking early, or mutating a shared resource, a loop may say the truth more clearly.

The earlier array lesson introduced the job of each method. Now read them as higher-order functions. map takes a callback and returns a new array. filter takes a predicate callback and returns the items that pass. reduce takes a reducer callback and returns whatever the accumulator becomes.

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));

The first reducer groups orders into an object by status. The next two show that reduce is powerful enough to implement map and filter: start with an empty array, push the right results, and return the accumulator. That is useful to understand, but usually not the clearest production code. Prefer the specific method when the specific method says the job.

Also remember callback signatures. Array callbacks receive element, index, and array. That is why arr.map(parseInt) surprises and why a sorter callback has its own shape: (a, b) => number. Not every callback API passes the same arguments.

Where you’ll use this

Higher-order functions are not just a functional-programming exercise. They show up in everyday frontend work:

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/>;

• Event handlers store callbacks for later: the browser calls handleSave when the click happens.
• Array pipelines filter and map API data into display data.
• Middleware and wrappers add logging, authentication, timing, or retries around a function.
• React-style components often receive callbacks like onSelect so a child can report a user action without knowing what the parent will do.

Common misconceptions

Answer once from your prediction, then read every explanation. The wrong answers are chosen to catch real bugs.

Key takeaways

• A higher-order function takes a function as an argument, returns a function, or both.
• Pass the function value, such as fn, when an API needs to call it later; fn() calls now.
• Returned functions can remember factory settings through closures.
• Declarative pipelines can make intent clearer, but loops are still valid when they are clearer or more efficient.
• Array callback signatures matter: map passes element, index, and array, which explains map(parseInt).
• Always consider an initial value for reduce, especially when an array might be empty.

Up next: Pure functions & side effects, where you will separate calculations that always give the same result from code that changes the outside world.