Complete Reference
JavaScript Array Methods
Every method you need — map, filter, reduce, find, and 20+ more. Each with a link to the full reference page, when to use it, and whether it mutates.
Last updated: October 2026 • Reading time: ~15 minutes
Quick answer: Use map() to transform every element, filter() to keep some elements, reduce() to collapse an array into one value, find() to get the first match, and forEach() to loop without building a new array.
🎯 The 5 methods you'll use daily
If you learn nothing else, learn these. They cover 90% of real array work.
| Method | Returns | Use when | Mutates? |
|---|---|---|---|
| map() | New array, same length | Transform every element | No |
| filter() | New array, shorter or equal | Keep only matching elements | No |
| reduce() | Any single value | Collapse into sum, count, object | No |
| find() | Element or undefined | Get the first match | No |
| forEach() | undefined | Side effects only (log, save) | No |
The most important distinction:
map(), filter(), and reduce() return new values. forEach() returns nothing — it's for side effects.
If you've ever written const x = arr.forEach(...) and gotten undefined, that's why.
🔄 Transform methods
Change each element and get a new array back. Non-destructive.
map().flat(). Use when your map returns arrays.Infinity for complete flattening.🔍 Filter methods
Remove elements that don't match a test. Returns a new array.
undefined if none do. Short-circuits.-1. Perfect for updates and removals.true if any element passes a test. Short-circuits on first match.true if all elements pass a test. Short-circuits on first failure.📉 Aggregate methods
Collapse an array into a single value. The Swiss Army knife of array methods.
🔁 Iterate methods
Loop over elements for side effects. No new array returned.
➕ Add and remove methods
These methods mutate the original array. Use with intention.
✨ Create methods
Build a new array from scratch or from an iterable.
⚖️ map vs filter vs reduce — the one question everyone asks
The most-searched comparison. Here's the definitive answer.
map() — transform every element
Use when you want to change each element and keep the same array length.
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.1);
// [11, 22, 33]If your output array is the same length as the input, you probably want map.
filter() — keep some elements
Use when you want to remove elements that don't match a condition.
const prices = [10, 20, 30];
const expensive = prices.filter(p => p > 15);
// [20, 30]If your output array is shorter than the input, you probably want filter.
reduce() — collapse to one value
Use when you want to combine all elements into a single value.
const prices = [10, 20, 30];
const total = prices.reduce((sum, p) => sum + p, 0);
// 60
// Group by category
const grouped = items.reduce((acc, item) => {
acc[item.category] = acc[item.category] || [];
acc[item.category].push(item);
return acc;
}, {});If you're not getting an array back, or the answer is a number/object, you probably want reduce.
Chaining them together:
// Get total price of items over $50, with tax
const total = items
.filter(item => item.price > 50)
.map(item => item.price * 1.1)
.reduce((sum, price) => sum + price, 0);This is the pattern. filter → narrow down, map → transform, reduce → sum up.
🛡️ Mutating vs non-mutating — the complete list
Memorize this. It prevents 90% of array bugs.
Mutates the original array
push(),pop()shift(),unshift()splice()sort(),reverse()fill(),copyWithin()
Returns new array
map(),filter()slice(),concat()flat(),flatMap()toReversed(),toSorted(),toSpliced()
ES2023+ added non-mutating versions: toReversed(), toSorted(), and toSpliced() work exactly like their mutating siblings but return new arrays. If you're writing React or Vue code, always use these instead of reverse(), sort(), or splice().
⚠️ Common mistakes to avoid
- Using forEach when you need a result.
forEachreturnsundefined. Usemapif you want a new array. - Forgetting the initial value in reduce. Without it, an empty array throws an error.
- Sorting numbers without a comparator.
[10, 9].sort()returns[10, 9], not[9, 10]. - Assuming slice and splice are the same.
slicereturns a copy;splicemutates. - Using push in React state. Always use spread:
setItems([...items, newItem]). - Chaining filter after map when filter would be faster first. Filter first, then map — fewer items to process.
- Using
forEachwhen you need early exit. You can't break out of forEach. Use afor...ofloop orfind.
❓ Frequently asked questions
What is the difference between map and filter in JavaScript?
map transforms every element and returns a new array of the same length. filter keeps only the elements that pass a test and returns a shorter array. Use map to change items, filter to remove items.
What is the difference between forEach and map?
forEach runs a function on each element for side effects and returns undefined. map returns a new array with transformed elements. Use forEach when you don't need the result, map when you do.
When should I use reduce instead of map or filter?
Use reduce when you need to collapse an array into a single value — a sum, a count, a grouped object, a string. map and filter return arrays; reduce returns anything.
What is the difference between find and filter?
find returns the first matching element or undefined. filter returns a new array with all matches. Use find when you need one item, filter when you need all.
What is the difference between slice and splice?
slice returns a new array copy without modifying the original. splice mutates the original array by removing, replacing, or inserting elements.
Which array methods mutate the original array?
push, pop, shift, unshift, splice, sort, reverse, fill, and copyWithin mutate. map, filter, reduce, find, findIndex, slice, concat, flat, flatMap, and includes do not.