Array methods.
Seven that cover 90%.
JavaScript arrays have 30+ methods. Seven of them do most of the work: map, filter, reduce, find, some, every, includes. This page covers what each does, when to use each, and the mistakes that come up in real code — like using filter(...)[0] when you meant find, or forEach when you meant map.
Short answer: map transforms, filter selects, reduce aggregates. find returns the first match, some returns true if any match, every returns true if all match, includes returns true if a value exists. All of them return new values and don't mutate the original array. Use array methods for 95% of array work — for loops are for cases where they don't fit. Always pass an initial value to reduce.
✅ The seven methods
What each does, in one line.
map
Transforms every element. Same length. Returns a new array.
filter
Keeps elements where the callback returns true. Same or shorter length.
reduce
Collapses the array to a single value. Takes an initial value.
find
Returns the first matching element, or undefined.
some
Returns true if at least one element matches.
every
Returns true if all elements match.
includes
Returns true if a specific value is in the array.
Not on the list
forEach (no return), findIndex (index), sort, slice, concat — other categories.
✅ The methods in action
Same array, seven operations.
const nums = [1, 2, 3, 4, 5]; // map — transform each element console.log(nums.map(n => n * 2)); // [2, 4, 6, 8, 10] // filter — keep matching elements console.log(nums.filter(n => n > 3)); // [4, 5] // reduce — aggregate to one value console.log(nums.reduce((sum, n) => sum + n, 0)); // 15 // find — first match console.log(nums.find(n => n > 3)); // 4 // some — any match? console.log(nums.some(n => n > 4)); // true // every — all match? console.log(nums.every(n => n > 0)); // true // includes — exact value? console.log(nums.includes(3)); // true console.log(nums.includes(99)); // false
Method by return type: Returns a new array: map, filter, slice, concat, flat, flatMap Returns a single element (or undefined): find, at, pop (mutates), shift (mutates) Returns a boolean: some, every, includes Returns a number: reduce (if accumulator is number), findIndex, indexOf Returns undefined: forEach (only side effects) The core three (map, filter, reduce) are the ones that transform data. The rest are mostly for searching or checking conditions. A useful rule: If you're building a new array → map/filter If you're checking a condition → some/every/find/includes If you're collapsing to one value → reduce If you're just iterating → forEach Every method has one job. Use it for that job.
✅ The common mix-ups
Three pairs that get confused.
const users = [
{ name: 'Alice', active: true },
{ name: 'Bob', active: false }
];
// ❌ filter + [0] — inefficient
const first = users.filter(u => u.active)[0];
// ✅ find — stops at first match
const first = users.find(u => u.active);
// ❌ filter + length — inefficient
const hasActive = users.filter(u => u.active).length > 0;
// ✅ some — stops at first match
const hasActive = users.some(u => u.active);
// ❌ filter + length === arr.length — inefficient
const allActive = users.filter(u => u.active).length === users.length;
// ✅ every — stops at first non-match
const allActive = users.every(u => u.active);
// ❌ map without using the result
users.map(u => console.log(u.name));
// ✅ forEach — no wasted array
users.forEach(u => console.log(u.name));
// ❌ forEach when you need a new array
const names = [];
users.forEach(u => names.push(u.name));
// ✅ map — the whole point
const names = users.map(u => u.name);
Why find is better than filter[0]: filter(u => u.active) → iterates ALL elements → builds an array of all matching → then [0] extracts the first → wasted work if there are many matches find(u => u.active) → iterates until first match → returns immediately → no array allocation → faster, clearer Why some is better than filter.length > 0: filter(u => u.active) → iterates ALL elements → builds an array → then checks length some(u => u.active) → iterates until first match → returns true immediately → no array allocation Why every is better than filter.length === arr.length: filter(u => u.active) → iterates ALL elements → builds an array → then compares length every(u => u.active) → iterates until first non-match → returns false immediately → no array allocation The rule: use the method that matches your intent. "Is there any?" → some "Are all?" → every "Find one?" → find "Find all?" → filter "Transform each?" → map "Collapse to one?" → reduce The intent method is also the efficient one.
✅ Chaining
Building pipelines.
const users = [
{ name: 'Alice', age: 30, active: true },
{ name: 'Bob', age: 25, active: false },
{ name: 'Charlie', age: 35, active: true },
{ name: 'Diana', age: 28, active: true }
];
// Filter → map → reduce
const totalActiveAge = users
.filter(u => u.active) // [Alice, Charlie, Diana]
.map(u => u.age) // [30, 35, 28]
.reduce((sum, age) => sum + age, 0); // 93
console.log(totalActiveAge); // 93
// Filter → map → sort
const activeNames = users
.filter(u => u.active)
.map(u => u.name)
.sort();
console.log(activeNames);
// ['Alice', 'Charlie', 'Diana']
// Find → access
const bob = users.find(u => u.name === 'Bob');
console.log(bob?.age); // 25
Chain order matters for performance: .filter(u => u.active) → creates an array of 3 (Alice, Charlie, Diana) → 4 iterations (checks all elements) .map(u => u.age) → creates an array of 3 (30, 35, 28) → 3 iterations (only the filtered ones) .reduce(...) → 3 iterations → returns 93 Total: 4 + 3 + 3 = 10 iterations. If you reversed the order: .map(u => u.age) → 4 iterations, 4 elements .filter(...) → still 4 iterations → BUT age is a number, and the filter predicate needed the user object The lesson: filter FIRST. Reduces the elements downstream methods process. The map and reduce then run on a smaller array. For very large arrays, chaining creates intermediate arrays. If performance matters, use a single reduce that does all three operations in one pass. For most code, the chained version is right. Readability > micro-optimization. The chain says exactly what it does — filter active users, get their ages, sum them. That's worth the extra iterations.
Don't use filter(...)[0] when you meant find. This is the most common array method mistake. filter(...)[0] iterates the entire array, builds a new array of all matches, then extracts the first element. find stops at the first match. The difference matters for large arrays — find can be 10x faster on arrays where the match is early. It's also more readable: find says "I want one element," filter(...)[0] says "I want all elements, then throw away everything but the first." Use the method that matches your intent.
⚠️ Common mistakes
The array method mistakes that cost real time.
filter(...)[0] instead of findInefficient — iterates all. Fix: find.
filter(...).length > 0 instead of someInefficient. Fix: some.
filter(...).length === arr.length instead of everyInefficient. Fix: every.
map without using the resultYou meant forEach. Fix: forEach.
forEach to build an arrayYou meant map. Fix: map.
reduce without an initial valueThrows on empty arrays. Fix: always pass an initial value.
Filter first, then transform, then aggregate. Fix: filter before map.
map/filterConfusing side effects. Fix: return new values, don't mutate.
❓ Frequently asked
What are the most important JavaScript array methods?
The seven you'll use every day. map transforms each element into a new array. filter keeps elements that match a condition. reduce collapses the array into a single value. find returns the first element that matches. some returns true if at least one element matches. every returns true if all elements match. includes returns true if a specific value is in the array.
What is the difference between find and filter?
filter returns an array of all matching elements. find returns the first matching element or undefined. Use filter when you want all matches (a list of active users). Use find when you want one specific match (the user with id 42). find is more efficient — it stops iterating as soon as it finds a match. If you find yourself writing filter(...)[0], you meant find(...).
What is the difference between some and every?
some returns true if at least one element matches. every returns true if all elements match. Both short-circuit. Use some for existence checks ('does this array contain any active users?'), every for universal checks ('are all users active?').
What is the difference between forEach and map?
forEach iterates for side effects and returns undefined. map transforms each element and returns a new array of the same length. Use forEach when you want to do something with each element. Use map when you want to build a new array. The mistake: using map without using the returned array — that's just forEach with extra allocation.
Does map mutate the original array?
No. map returns a new array and does not modify the original. But — if the element is an object, you can mutate the object's properties, which mutates the original array's elements. If you want to avoid this, return new objects: arr.map(obj => ({ ...obj, x: 1 })).
Should I use for loops or array methods?
Array methods for almost everything. They're declarative — you say what you want, not how to build it. Use for loops when you need to break early and find doesn't fit, or when you're iterating a very large array and micro-optimizing. For 95% of code, the array method is clearer.
🔗 Continue learning
Next in this series: