Lesson 7
map, filter & find
Build a practical mental model for map, filter & find and use it in working JavaScript.
By the end, you will be able to…
- Explain map, filter & find in your own words
- Use map, filter & find in a small program
- Recognize and debug a common failure mode
Build the mental model
map transforms every element into a new array of the same length; filter keeps only elements matching a condition; find returns the first matching element (or undefined). Each name tells you exactly what shape to expect back.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
These three methods replace most manual loops over arrays and make the intent of the transformation obvious from the method name alone.
Real-world example
Rendering a list of UI cards from data is almost always items.filter(...).map(item => <Card .../>) in one readable chain.
Common mistakes
- Using map when you meant filter (map always returns the same length, with undefined for skipped items)
- Forgetting find returns undefined, not an error, when nothing matches
- Not returning a value from the map callback, producing an array of undefined
Try it yourself
Challenge
Get the names of every user older than 18 using filter then map.
Knowledge check
What does array.find() return when no element matches?
Summary
Use map to transform every item, filter to keep matching items, and find to get the first match.