map(), filter(), and reduce() are three of the most important array methods in JavaScript. Each one takes a function as an argument and runs it against every element of an array — but they each do something different with the results. Once these click, you'll find yourself reaching for them instead of writing manual for loops for most array transformations.

map() — Transform Every Element

map() creates a new array by applying a function to every element of the original. The new array is always the same length as the original — it transforms, it doesn't remove anything.

const prices = [10, 20, 30];

const withTax = prices.map(price => price * 1.1);

console.log(withTax);
console.log(prices); // original is untouched

Output:

[ 11, 22, 33 ]
[ 10, 20, 30 ]

filter() — Keep Only What Matches

filter() creates a new array containing only the elements for which the callback function returns true. The result can be shorter than the original — or even empty.

const ages = [12, 18, 25, 16, 30];

const adults = ages.filter(age => age >= 18);

console.log(adults);

Output:

[ 18, 25, 30 ]

reduce() — Combine Everything into One Value

reduce() is the most flexible of the three, and the one people find hardest to read at first. It walks through the array and "reduces" it down to a single accumulated value — a total, an object, even another array.

const cart = [10, 20, 30];

// reduce(callback, initialValue)
// callback receives (accumulator, currentElement)
const total = cart.reduce((accumulator, price) => accumulator + price, 0);

console.log(total);

Output:

60

The second argument to reduce() — 0 in this example — is the starting value of the accumulator. Leaving it out is legal but risky: if the array is empty, reduce() without an initial value throws an error instead of returning a sensible default.

Chaining Them Together

Because map() and filter() both return new arrays, you can chain them directly — a very common real-world pattern.

const orders = [
  { item: "Book", price: 15, paid: true },
  { item: "Pen", price: 2, paid: false },
  { item: "Laptop", price: 900, paid: true },
];

const totalPaid = orders
  .filter(order => order.paid)
  .map(order => order.price)
  .reduce((sum, price) => sum + price, 0);

console.log(totalPaid);

Output:

915

Each step is easy to read in isolation: keep only paid orders, pull out their prices, then sum them. This is usually far clearer than the equivalent hand-written loop with a manual accumulator variable. For a full worked example that combines array iteration with sorting logic, see sorting an array of objects by property.