JavaScript Array Methods: map, filter, and reduce Explained

Why These Three Methods Matter

map, filter, and reduce are the workhorses of modern JavaScript. They replace most for loops, making your code shorter, more readable, and easier to reason about. They're pure functions — they don't mutate the original array, they return a new one.

Master these three and you'll write significantly cleaner JavaScript.

---

Array.map()

What it does: Transforms every element in an array, returning a new array of the same length.

Syntax:

const result = array.map((element, index, array) => {
  return transformedElement;
});

Example — double every number:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

Example — extract names from objects:

const users = [
  { id: 1, name: "Alice", age: 28 },
  { id: 2, name: "Bob", age: 34 },
  { id: 3, name: "Carol", age: 22 },
];

const names = users.map(user => user.name);
// ["Alice", "Bob", "Carol"]

Example — transform objects:

const prices = [10, 25, 50];
const withTax = prices.map(price => ({
  original: price,
  withTax: (price * 1.2).toFixed(2),
}));
// [{ original: 10, withTax: "12.00" }, ...]

In React, map is how you render lists:

{users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

---

Array.filter()

What it does: Returns a new array containing only the elements that pass a test (where the callback returns true).

Syntax:

const result = array.filter((element, index, array) => {
  return boolean; // true = keep, false = remove
});

Example — keep only even numbers:

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]

Example — filter objects by property:

const users = [
  { name: "Alice", active: true },
  { name: "Bob", active: false },
  { name: "Carol", active: true },
];

const activeUsers = users.filter(user => user.active);
// [{ name: "Alice", active: true }, { name: "Carol", active: true }]

Example — remove falsy values:

const mixed = [0, 1, "", "hello", null, undefined, false, true];
const truthy = mixed.filter(Boolean);
// [1, "hello", true]

Example — search/filter UI:

const query = "ali";
const results = users.filter(user =>
  user.name.toLowerCase().includes(query.toLowerCase())
);

---

Array.reduce()

What it does: Reduces an array to a single value by accumulating results. It's the most flexible — you can implement map and filter with it.

Syntax:

const result = array.reduce((accumulator, element, index, array) => {
  return updatedAccumulator;
}, initialValue);

The initialValue is the starting value of the accumulator. Always provide it.

Example — sum all numbers:

const numbers = [10, 20, 30, 40];
const total = numbers.reduce((sum, n) => sum + n, 0);
// 100

Example — count occurrences:

const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }

Example — group by property:

const people = [
  { name: "Alice", dept: "Engineering" },
  { name: "Bob", dept: "Design" },
  { name: "Carol", dept: "Engineering" },
];

const byDept = people.reduce((acc, person) => {
  const key = person.dept;
  acc[key] = acc[key] || [];
  acc[key].push(person);
  return acc;
}, {});
// { Engineering: [Alice, Carol], Design: [Bob] }

Example — flatten an array:

const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
// [1, 2, 3, 4, 5, 6]

---

Chaining Methods

The real power comes from chaining. Each method returns a new array, so you can chain them:

const orders = [
  { product: "Laptop", price: 999, shipped: true },
  { product: "Mouse", price: 29, shipped: false },
  { product: "Keyboard", price: 79, shipped: true },
  { product: "Monitor", price: 349, shipped: true },
];

// Sum of shipped orders only
const shippedTotal = orders
  .filter(order => order.shipped)
  .map(order => order.price)
  .reduce((sum, price) => sum + price, 0);
// 1427

---

map vs filter vs reduce — When to Use Which

Use case	Method
Transform each element	map
Keep some elements	filter
Combine into one value	reduce
Group / tally / reshape	reduce
Render a list in React	map

---

Common Mistakes

Forgetting to return in reduce:

// Wrong — accumulator becomes undefined
const bad = [1, 2, 3].reduce((acc, n) => {
  acc + n; // missing return!
}, 0);

// Correct
const good = [1, 2, 3].reduce((acc, n) => acc + n, 0);

Mutating the accumulator object in reduce:

// Safer pattern — always return the accumulator
const result = items.reduce((acc, item) => {
  return { ...acc, [item.id]: item };
}, {});

---

Conclusion

These three methods — map, filter, reduce — will eliminate the majority of your for loops. Start by replacing simple loops with map or filter, then reach for reduce when you need to aggregate or reshape data. Chaining them together produces expressive, readable pipelines that are much easier to test and maintain.