Array Methods
map, filter, reduce, find, some, every — the functional toolkit
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
JavaScript arrays ship with powerful higher-order methods that replace most for loops.
map — transform each element, returns a new array of the same length: ``javascript [1, 2, 3].map(x => x * 2) // [2, 4, 6]
filter — keep elements that pass a test: ``javascript [1, 2, 3, 4].filter(x => x % 2 === 0) // [2, 4]
reduce — collapse the array to a single value: ``javascript [1, 2, 3, 4].reduce((acc, x) => acc + x, 0) // 10 // acc starts at 0 (the second argument)
find — first element that passes the test (or undefined): ``javascript [5, 12, 8].find(x => x > 10) // 12
some — true if at least one element passes: ``javascript [1, 2, 3].some(x => x > 2) // true
every — true if all elements pass: ``javascript [2, 4, 6].every(x => x % 2 === 0) // true
forEach — like map but returns nothing, used for side effects only.
None of these mutate the original array (except forEach if you mutate inside the callback).
Examples
Chaining map and filter
Filter then transform — a common pipeline pattern
const prices = [10, 25, 5, 40, 15];
const discounted = prices
.filter(p => p >= 15) // [25, 40, 15]
.map(p => p * 0.9); // [22.5, 36, 13.5]
console.log(discounted);reduce to build an object
reduce is not just for sums — it can build any data structure
const words = ['cat', 'dog', 'cat', 'bird', 'dog', 'dog'];
const counts = words.reduce((acc, w) => {
acc[w] = (acc[w] ?? 0) + 1;
return acc;
}, {});
console.log(counts); // { cat: 2, dog: 3, bird: 1 }Next in JavaScript Core
Destructuring