Higher-Order Functions in JavaScript

Analogy categoryAnalogies

1. Introduction

A higher-order function is any function that either accepts another function as an argument, returns a function as its result, or both. Because JavaScript treats functions as first-class values, they can be stored in variables, passed around, and returned like any other data. Higher-order functions are the basis of array methods such as map, filter, and reduce, and enable powerful patterns like function composition and function factories.

🏏

Cricket analogy: A team selector who accepts different strategy functions for different pitches — spin-friendly Chepauk versus pace-friendly Perth — is a higher-order function, since it takes a strategy as input just as JavaScript functions take other functions as arguments.

2. Syntax

javascript

// takes a function as an argument
array.map((item) => item * 2);
array.filter((item) => item % 2 === 0);
array.reduce((accumulator, item) => accumulator + item, 0);

// returns a function
function multiplyBy(factor) {
  return function (n) {
    return n * factor;
  };
}

3. Explanation

map creates a new array by applying a transformation function to every element. filter creates a new array containing only the elements for which the given function returns true. reduce accumulates all elements into a single value by repeatedly applying a function that combines the running total (accumulator) with the current element. None of these methods mutate the original array.

🏏

Cricket analogy: map is like recalculating every batter's strike rate into a new scorecard without touching the original ball-by-ball data; filter is like pulling out only batters who scored a century, leaving the full squad list untouched; reduce sums all totals into one team score.

A function can also be a factory: it returns another function, often one that is customized using values captured through a closure, as in multiplyBy(factor) returning a specialized multiplier function.

🏏

Cricket analogy: A bowling-line generator function that takes a bowler's pace and returns a customized deliver() function tuned to that pace — closing over the speed value — is like multiplyBy(factor) returning a specialized multiplier, the way Jasprit Bumrah's yorker generator is tuned to his exact release point.

Gotcha: map, filter, and reduce always return a NEW array (or value for reduce) — they never mutate the original array. Also, reduce requires an initial value argument in most cases; omitting it causes the first array element to be used as the initial accumulator, which can produce subtly wrong results (or a TypeError on an empty array) if you're not careful.

4. Example

javascript

const numbers = [1, 2, 3, 4, 5, 6];

const doubled = numbers.map((n) => n * 2);
const evens = numbers.filter((n) => n % 2 === 0);
const total = numbers.reduce((sum, n) => sum + n, 0);

function multiplyBy(factor) {
  return function (n) {
    return n * factor;
  };
}

const triple = multiplyBy(3);

console.log(doubled);
console.log(evens);
console.log(total);
console.log(triple(5));

5. Output

text

[ 2, 4, 6, 8, 10, 12 ]
[ 2, 4, 6 ]
21
15

6. Key Takeaways

A higher-order function accepts a function as an argument, returns a function, or both.
map transforms every element into a new array of the same length.
filter keeps only the elements for which the callback returns true, possibly shrinking the array.
reduce combines all elements into a single accumulated value using a callback and an initial value.
Function factories, like multiplyBy(factor), use closures to return customized functions.
map, filter, and reduce never mutate the original array; they return new results.