JavaScript map() vs forEach(): The Definitive Comparison

Both map() and forEach() iterate over every element in an array, but they exist for fundamentally different reasons. Picking the wrong one produces subtle bugs and unreadable code. Here is the practical difference and when each belongs in your toolkit.

The core semantic difference

map() returns a new array of transformed values. It is a pure, functional operation: input array in, brand-new array out, original untouched. Because it returns an array, you can chain it with other array methods.

forEach() returns undefined. It is an imperative loop designed to run side effects, such as logging, mutating external state, or calling a DOM API. Nothing comes back.

const nums = [1, 2, 3];\n\nconst doubled = nums.map(n => n * 2);\n// doubled = [2, 4, 6]\n\nconst nothing = nums.forEach(n => n * 2);\n// nothing = undefined  (the result is thrown away)

When to use map()

Reach for map() whenever you want to transform each element into a new value and collect the results. Rendering lists in React, converting API responses, and reshaping data are canonical use cases.

const users = [\n  { id: 1, first: 'Ada', last: 'Lovelace' },\n  { id: 2, first: 'Grace', last: 'Hopper' }\n];\n\nconst displayNames = users.map(u => `${u.first} ${u.last}`);\n// ['Ada Lovelace', 'Grace Hopper']

When to use forEach()

Use forEach() when you need side effects and do not care about a return value: writing to a database, logging, dispatching events, or updating a DOM node in place.

const buttons = document.querySelectorAll('.btn');\n\nbuttons.forEach(btn => {\n  btn.addEventListener('click', handleClick);\n});\n\n// Logging is another honest forEach use case\nusers.forEach(u => console.log(u.id, u.first));

Chainability: map()'s superpower

Because map() returns an array, it composes cleanly with filter(), reduce(), and other array methods. This is where functional pipelines shine.

const orders = [\n  { item: 'book', price: 12, inStock: true  },\n  { item: 'pen',  price: 3,  inStock: false },\n  { item: 'lamp', price: 40, inStock: true  }\n];\n\nconst total = orders\n  .filter(o => o.inStock)         // keep in-stock items\n  .map(o => o.price * 1.08)       // add 8% tax\n  .reduce((sum, p) => sum + p, 0); // sum them\n\n// total = 56.16

You cannot express this pipeline with forEach() without introducing a mutable accumulator variable, which defeats the point.

Performance

For small-to-medium arrays, the difference is negligible; both are optimized in modern engines. In tight, hot-path loops over hundreds of thousands of elements, a plain for loop or for...of can be modestly faster than either because it avoids the per-iteration callback invocation. That said, this rarely matters in application code, and readability should almost always win. Measure before you optimize.

// Only reach for this style when profiling proves you need it\nlet sum = 0;\nfor (let i = 0; i < nums.length; i++) sum += nums[i];

Common bugs

Forgetting to return from a map callback. An arrow function with braces needs an explicit return, or every element becomes undefined.

// Bug: no return -> [undefined, undefined, undefined]\nconst broken = nums.map(n => { n * 2; });\n\n// Fix: return explicitly, or drop the braces\nconst fixed1 = nums.map(n => { return n * 2; });\nconst fixed2 = nums.map(n => n * 2);

Using forEach() when you meant map(). Pushing into an outer array from inside forEach() is a code smell that map handles for free.

// Anti-pattern\nconst result = [];\nnums.forEach(n => result.push(n * 2));\n\n// Idiomatic\nconst result = nums.map(n => n * 2);

Using map() purely for side effects. If you discard the returned array, you are allocating memory for nothing. Use forEach() instead.

Quick decision guide

\n
• Need a transformed array? map()
\n
• Chaining with filter/reduce? map()
\n
• Running side effects, no return value needed? forEach()
\n
• Need to break out of the loop early? Neither, use for...of with break, or some()/every()
\n

Choose based on intent, not habit. Your future readers, including you, will thank you.