map() and filter()
📚 What are map() and filter()? map() and filter() are the two most important array methods. map() transforms every item in an array, returning a new array of the same length. filter() keeps only the items where a condition is true. Both take a callback function and never change the original array.
Appy Says…
If you're still writing for loops to transform or filter arrays, there's a better way. .map() and .filter() are two of JavaScript's most important array methods — they're cleaner, safer, and used in virtually every React app ever built.
What are map and filter?
.map(fn) creates a new array by applying a function to every element. .filter(fn) creates a new array with only the elements where the function returns true. Neither mutates the original.
- •
array.map(item => item * 2)— double every number - •
array.map(user => user.name)— extract one property from each object - •
array.filter(n => n > 0)— keep only positive numbers - •
array.filter(user => user.active)— keep only active users - •Chain them:
users.filter(u => u.age >= 13).map(u => u.name) - •Both return new arrays — perfect for React state updates
Think of it like a TikTok algorithm
TikTok's For You feed takes all available videos (map — transforms each into a display card) and then removes anything you've already seen (filter). Two passes, clean result, original data untouched.
How It Works
- •1.
.map(callback)callscallback(item, index, array)for every element - •2. The callback returns the transformed value for the new array
- •3.
.filter(callback)callscallback(item)— if truthy, item is kept - •4. Both return new arrays and never change the original
- •5. Can chain:
.filter(...).map(...).filter(...) - •6. In React:
{products.filter(p => p.inStock).map(p =>)}
Real-World Examples
- •Extract song titles:
playlist.map(song => song.title) - •Show only available products:
products.filter(p => p.inStock) - •Convert prices to GBP:
prices.map(p => (p * 0.79).toFixed(2)) - •Filter search results:
posts.filter(p => p.title.includes(query)) - •Build React UI:
users.map(u => <UserCard key={u.id} user={u} />)
Key Facts
- •
.map()always returns an array of the same length;.filter()may return a shorter one - •Both accept a second argument:
callback(item, index, array) - •For transforming AND filtering together,
.flatMap()can do both in one pass - •These are part of functional programming — a paradigm that avoids mutation and side effects
Watch Out!
Don't use .map() when you just want side effects (like logging or saving to a database) — use .forEach() instead. Using .map() for side effects wastes memory creating an array you discard and confuses other developers.
Remember
.map() transforms every element → same length array. .filter() keeps only matching elements → shorter or equal length array. Both are non-mutating.
What You Learned
- •
.map(fn)transforms every element;.filter(fn)keeps matching elements - •Both return new arrays — originals untouched — perfect for React state
- •Unlocks: data transformation pipelines, search filtering, rendering lists in React
Key Facts
- →
.map()always returns an array of the same length;.filter()may return a shorter one - →Both accept a second argument:
callback(item, index, array) - →For transforming AND filtering together,
.flatMap()can do both in one pass - →These are part of functional programming — a paradigm that avoids mutation and side effects
Real-World Examples
Remember
.map() transforms every element → same length array. .filter() keeps only matching elements → shorter or equal length array. Both are non-mutating.
Quick Quiz
map() returns?