Array Methods

map, filter, reduce, find, and every the functional toolkit for transforming arrays.

Overview

JavaScript arrays come with a powerful set of higher-order methods that take a callback function and apply it to each element. These methods let you express data transformations declaratively "transform each item", "keep only items matching this condition", "fold all items into a single value" without writing manual loops. The most important trio is: map (transform each element → new array of same length), filter (keep elements matching a condition → new array, possibly shorter), and reduce (accumulate all elements into a single value). All these methods are non-mutating they return new arrays (or values) and leave the original unchanged. This is key to writing predictable code. Chaining them together is a common pattern: const result = data.filter(…).map(…).

Key Points

•map(fn): transforms each element, returns a new array of the same length
•filter(fn): keeps elements where fn returns truthy, returns a new (possibly shorter) array
•reduce(fn, initial): accumulates all elements into a single value (sum, object, etc.)
•find(fn): returns the first element where fn is truthy, or undefined
•every(fn) / some(fn): return boolean all/any elements satisfy the condition
•forEach(fn): like map but returns nothing used only for side effects

Examples

map transform each element

const prices = [10, 20, 30];

// Add 10% tax to each price
const withTax = prices.map(p => p * 1.1);
console.log(withTax); // [11, 22, 33]

// Convert to strings
const labels = prices.map(p => `$${p}`);
console.log(labels); // ["$10", "$20", "$30"]

filter keep matching elements

const scores = [45, 72, 88, 34, 91, 60];

const passing = scores.filter(s => s >= 60);
console.log(passing); // [72, 88, 91, 60]

const users = [
  { name: "Alice", active: true },
  { name: "Bob", active: false },
  { name: "Carol", active: true },
];
const activeUsers = users.filter(u => u.active);
console.log(activeUsers.map(u => u.name)); // ["Alice", "Carol"]

reduce accumulate into a single value

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

// Sum
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Max value
const max = numbers.reduce((acc, n) => n > acc ? n : acc, -Infinity);
console.log(max); // 5

The second argument to reduce() is the initial value for the accumulator. Always provide it to avoid bugs with empty arrays.

Common Mistakes

Forgetting to return inside map/filter callback without return, every element becomes undefined
Using map for side effects (logging, mutating) use forEach for side effects, map for transformations
Not providing an initial value to reduce() can cause unexpected behavior with empty arrays

Note

Chain map and filter for clean transformations: users.filter(u => u.active).map(u => u.name) reads almost like English.

Array Methods

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does map() return?