Module 5 · Functions

Higher-Order Functions

Intermediate10m read14m practice24m total

Higher-Order FunctionsmapfilterreduceAbstraction

Introduction

A higher-order function is a function that accepts another function, returns another function, or both. JavaScript makes this natural because functions are first-class values.

Array methods like map, filter, and reduce are the most familiar examples, but higher-order functions also power middleware, validators, decorators, memoization, composition, and functional pipelines.

Why This Matters

Higher-order functions are a favorite interview topic because they reveal whether you can abstract behavior, not just write loops. Implementing map, filter, and reduce by hand is also a classic way to prove you understand callbacks, indexes, accumulators, and immutability.

Theory

Definition

A function is higher-order if it takes a function as an argument, returns a function as its result, or both. filter(items, predicate) is higher-order because it receives predicate. makeMultiplier(factor) is higher-order because it returns a new function.

HOFs separate control flow from custom behavior. A loop decides how to traverse data; a callback decides what to do with each item. This reduces duplication and lets you compose small behaviors.

Method	Callback role	Result
`map`	transform each item	New array of same length.
`filter`	keep or drop each item	New array of selected items.
`reduce`	combine item into accumulator	Any final value.
`some`	test if any item passes	Boolean.
`every`	test if all items pass	Boolean.

Factories like makeThresholdFilter(80) return specialized functions. Decorators like once(fn) return wrapped versions of existing functions. In both cases, closures preserve configuration. Do not hide simple logic behind overly clever chains; HOFs should make intent clearer.

Visual Diagrams

Control flow plus behavior

higher-order function
  owns traversal, timing, or wrapping
        |
        +-- calls callback with item, index, collection
        |
        v
returns transformed data, decision, accumulator, or new function

The HOF owns the skeleton; the callback supplies the changing behavior.

Code Examples

A returned predicate function

The outer function captures minimum; the returned predicate uses it later inside filter.

Loading…

Transform, filter, then reduce

Each HOF has one job. The chain reads as a data pipeline.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const numbers = [1, 2, 3, 4];
2 
3const result = numbers
4  .filter(function (n) {
5    console.log('filter ' + n);
6    return n % 2 === 0;
7  })
8  .map(function (n) {
9    console.log('map ' + n);
10    return n * 10;
11  });
12 
13console.log(result.join(','));

Coding Exercises

Implement map, filter, and reduce

Hard

Implement myMap, myFilter, and myReduce for arrays. Each callback should receive (value, index, array). myReduce should require an explicit initial value. Do not mutate the input array.

Interview Questions

1What is a higher-order function? Give examples.

A higher-order function accepts a function, returns a function, or both. map, filter, and reduce accept callbacks. makeMultiplier(2) returns a new function. Decorators like once(fn) accept a function and return a wrapped function. This works because JavaScript functions are first-class values.

Asked at:GoogleMetaAmazonMicrosoft

Follow-ups

How would you implement `map` from scratch?
What is the difference between `map` and `forEach`?

2Why are higher-order functions useful?

They separate reusable control flow from variable behavior. Instead of rewriting loops, validation, or wrapping logic, you pass or return functions that specialize the generic operation. This reduces duplication and improves composability when used clearly.

Quiz

1. Which function is higher-order?

Summary

A higher-order function accepts a function, returns a function, or both.
HOFs separate reusable control flow from custom behavior.
`map`, `filter`, and `reduce` are core array higher-order functions.
Returned-function HOFs use closures to preserve configuration and private state.

Cheat Sheet

Definition: takes a function, returns a function, or both.

Array HOFs: map transforms, filter selects, reduce accumulates, some checks any, every checks all.

Returned functions: factories, decorators, middleware, validators.

Interview drill: implement map, filter, reduce with (value, index, array) callbacks.

Rule: use HOFs to clarify intent, not to show off cleverness.