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
// 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
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
[ 2, 4, 6, 8, 10, 12 ]
[ 2, 4, 6 ]
21
156. 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.
Practice what you learned
1. What defines a higher-order function?
2. What does numbers.filter((n) => n % 2 === 0) return for [1, 2, 3, 4, 5, 6]?
3. In numbers.reduce((sum, n) => sum + n, 0), what is the role of the 0 argument?
4. Do map and filter mutate the original array they are called on?
5. What does multiplyBy(factor) demonstrate about higher-order functions?
Was this page helpful?
You May Also Like
Closures in JavaScript
Understand how closures let inner functions remember and access variables from their outer scope, and how loop variable capture can trip you up.
Common Array Methods in JavaScript
Explore the most-used array methods, split into mutating methods that change the original array and non-mutating methods that return a new array.
Callback Functions in JavaScript
Understand callback functions, the difference between synchronous and asynchronous callbacks, and the callback hell problem.
Arrays in JavaScript
Understand how JavaScript arrays store ordered lists of values, how indexing and length work, and why `typeof` alone can't identify an array.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics