Lesson 7 of 80

Higher-order functions (map & filter)

Q: What makes a function 'higher-order,' and why do map/filter/reduce all count as one?

A strong answer covers: A higher-order function takes a function as an argument, returns a function, or both — possible because functions are first-class values in JavaScript; map, filter, and reduce all accept a callback describing one step and handle the iteration themselves; Closures are frequently involved, since the callback passed in often closes over variables from its surrounding scope.

Functions that take or return functions — the idea that map, filter, and reduce all share.

13 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

What makes a function a 'higher-order function'?

It takes a function as an argument, or returns oneIt runs faster than a normal functionIt can only be used with arrays

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Higher-order functions (map & filter)

What interviewers actually ask about this, and what a strong answer has to cover.

What makes a function 'higher-order,' and why do map/filter/reduce all count as one?

A strong answer covers

A higher-order function takes a function as an argument, returns a function, or both — possible because functions are first-class values in JavaScript
map, filter, and reduce all accept a callback describing one step and handle the iteration themselves
Closures are frequently involved, since the callback passed in often closes over variables from its surrounding scope

Likely follow-ups

Can you implement map using reduce, to show they're the same underlying idea?
Why does map need to return a value from its callback, and what happens if you forget to?
Name a higher-order function you'd write yourself, outside of the built-in array methods.

Practice these with the AI interviewer →

The plain-language idea

A higher-order function is just a function that takes another function as an argument, or returns one. That's the whole definition. It works because in JavaScript functions are values — you can pass them around like numbers or strings.

map, filter, and reduce are all higher-order functions: you hand them a small function describing one step, and they handle the looping.

See it in a real thing

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);        // transform each -> [2, 4, 6, 8]
const evens = nums.filter((n) => n % 2 === 0); // keep some     -> [2, 4]

You wrote the step (n to n * 2); map ran it across the list and built a new array. Same shape as the reduce lesson: describe one step, let the tool repeat it.

Higher-order functions: passing a function as dataStep 1 of 4

A higher-order function takes a function as an argument, returns one, or both.

What people usually miss

Watch out

map returns a new array; it never mutates the original. That immutability is exactly why React leans on it so heavily.
The callback gets more than the item — it also receives the index and the whole array.
map must return a value. Forgetting the return, or using it where forEach was meant, gives an array full of undefined.

The genealogy

These share one root — the higher-order function — and lean on closures, since the callback often closes over surrounding variables. Master this and the entire array-method family stops feeling like memorization.