devnotes.

Essential Array Methods: map, filter, reduce

map, filter, and reduce are the backbone of functional-style JavaScript, transforming data without mutating the original array.

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);           // [2, 4, 6, 8, 10]
const evens = nums.filter(n => n % 2 === 0);    // [2, 4]
const total = nums.reduce((sum, n) => sum + n, 0); // 15
const firstBig = nums.find(n => n > 3);         // 4

map returns a new array of the same length with each element transformed. filter returns a new, possibly shorter array containing only elements that pass a test. reduce folds the whole array down into a single accumulated value — a number, an object, even another array — and is the most flexible of the three; map and filter can both be written in terms of reduce, though the dedicated methods are clearer when they fit the job.

find returns the first matching element itself (not an array), or undefined if nothing matches — useful when you need one item, not a filtered list.