Map, Filter, Reduce, forEach: How (and How Not) to Use JavaScript’s Array Methods

May 28, 2025 | 6 min read

Introduction: Don’t Just Use Array Methods — Master Their Intent

JavaScript's array higher-order methods, map, filter, reduce, and forEach, are like the Avengers of list manipulation: each has a specific role, but sometimes one of them gets shoehorned into doing everyone else’s job. (Looking at you, reduce.)

These methods let you write clean, expressive code to transform, sift, and iterate through collections. They're powerful, elegant—and often misunderstood. Too often, I see code that:

uses map when nothing gets mapped,
abuses filter to sneak in side-effects,
turns reduce into an unholy ritual of logic dumping
or treats forEach like it's just a slower for loop with more syllables.

This post isn’t just about what these methods do, it’s about how to think with them. Each one was designed with a particular purpose in mind, and the key to writing great JavaScript isn’t knowing their syntax, it’s knowing their intent.

We’re going to walk through each method, show where they shine, where they get misused, and how to wield them like the elegant little tools they were meant to be. Think of it as couples therapy for you and your arrays.

By the end, you’ll be writing code that not only works but explains itself, readable, expressive, and a joy to revisit (even on a Monday morning, coffee in hand, wondering what Past You was thinking).

Let’s start with the biggest offender: forEach, the method that tries so hard to help, but often ends up causing confusion.

1. forEach: Good Intentions, Bad Reputation

If JavaScript array methods were a group project, forEach would be the well-meaning teammate who shows up but never quite delivers what the project needs. It’s not their fault; they just weren’t given the right job.

🧩 What forEach Is For

forEach is designed for side effects, logging values, updating external variables, calling functions that don’t return anything useful. It’s procedural in nature, meant to perform an action on each item of the array, without producing a new array.

const names = ['Tyler', 'Scott', 'Williams'];

names.forEach(name => {
  console.log(`Hello, ${name}!`);
});

✅ Great for:

Logging
DOM manipulation
Mutating external state (with care)

❌ Misuse #1: Using forEach to Build New Arrays

If you find yourself doing this, stop and listen for the sound of a disappointed linter:

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

numbers.forEach(n => {
  doubled.push(n * 2); // 😬
});

Why is this bad? Because you're manually doing what map already does more cleanly — return a new array based on transformation.

✅ Better:

const doubled = numbers.map(n => n * 2);

Not only is it shorter, it describes your intent: "Create a new array by doubling each number."

❌ Misuse #2: Forgetting It Doesn’t Return Anything

One of the weirdest gotchas about forEach is that it doesn’t return a value. Ever. So trying to use it in a chain like a fancy map() or expecting it to hand you a result will just leave you debugging an undefined.

const result = numbers.forEach(n => n * 2);
console.log(result); // undefined 🤷

💡 TL;DR on forEach

✅ Use it when your goal is side effects.
❌ Don’t use it to transform or filter — that’s not its job.
❌ Don’t expect it to return anything — it’s the friend who listens but never writes back.

If you're not doing something that affects outside the array, you probably want map, filter, or reduce.

Next up: let’s talk about map — a method that does return something, and is often used in name only.

2. map: It’s for Transformation, Not for Side Quests

map is for creating a new array, where each element is a transformation of the original.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);

Misuse: Ignoring the Return Value

numbers.map(n => {
  console.log(n); // 😬 side effect
});

✅ Better:

numbers.forEach(n => {
  console.log(n);
});

Misuse: Mutating Instead of Mapping

const updated = users.map(user => {
  user.active = true; // ⚠️ mutation
  return user;
});

✅ Better:

const updated = users.map(user => ({
  ...user,
  active: true
}));

3. filter: Keep the Good Stuff, Ditch the Rest

filter builds a subset of the array — items that return true for a given test.

const evens = numbers.filter(n => n % 2 === 0);

Misuse: Side Effects in filter

const result = users.filter(user => {
  user.active = true;
});

✅ Better:

const result = users.filter(user => user.active);

Misuse: Using filter().length > 0

const hasActive = users.filter(u => u.active).length > 0;

✅ Better:

const hasActive = users.some(u => u.active);

4. reduce: Infinite Power, Occasional Chaos

reduce turns an array into a single value — a number, object, or whatever you need.

const sum = numbers.reduce((acc, n) => acc + n, 0);

Chaining vs. Reduce: Two Roads, One Destination

When should you chain? When should you reduce?

Chained: Declarative, but Double-Pass

const doubledEvens = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

Reduce: One Pass, More Control

const doubledEvens = numbers.reduce((acc, n) => {
  if (n % 2 === 0) acc.push(n * 2);
  return acc;
}, []);

My Rule

Prefer chaining for clarity. Prefer reduce when you're cutting down a large array and want to avoid that second loop.

Final Thoughts

JavaScript’s array methods are incredible — but they’re also easy to misuse. The key is to think in intent, not just in mechanics. Reach for the method that best communicates your purpose, not just the one that “can get it done.”

Want to become a more thoughtful developer? Learn when to map, when to filter, when to reduce, and — most importantly — when to stop and refactor. Clean code isn’t about clever code. It’s about making your logic obvious to others — and to your future self.