Javascript: Difference between .forEach() and .map()

javascript

functions

best-practices

performance

byAnton Shumikhin·Feb 26, 2025

For a quick rundown: .forEach() iterates over array elements and executes a function without returning a value. It's your workhorse for code that merely needs to do something with each element.

On the other hand, .map() transforms elements in an array and returns a new array with these transformed elements while keeping the original array unaltered. It is your functional programming artist, painting a new array from the canvas of the existing one.

Using .forEach():

// Hey, I have a job for you: shout these numbers louder!
[1, 2, 3].forEach(item => console.log(item * 2)); // Screams: 2, 4, 6 into void

Using .map():

// Let's make these numbers more...twice-ier!
const doubled = [1, 2, 3].map(item => item * 2);
console.log(doubled); // Fashion show: [2, 4, 6] on console runway

Strategy: When to use `.forEach()` and when to `.map()`

If you are dealing with operations that don't need to return something and just cause side-effects like logging, manipulating DOM, or updating an external variable, .forEach() is your go-to method.

On the other hand, if you need to perform a transformation on an array and produce a new array without mutating the original one, then .map() is the tool for the job.

An eye on performance

While .map() can be less performant with very large arrays because of the additional memory space needed for the new array, its benefits of not mutating the original array generally outweigh this concern. Although if performance is a key issue, a good, old-fashioned for loop can outmaneuver both .map() and .forEach() in such cases.

The `undefined` blues

The output of .forEach() becomes undefined when there's no explicit return in the callback function. Meaning, it's shouting thoughts into the void. .map(), however, expects a return, and if not included, your new array will be a collection of undefined elements.

Beware of array mutation

In a multi-layered application, mutating arrays with .forEach() can cause headaches due to unexpected outcomes. It's like a butterfly flapping its wings in the codebase causing a typhoon in the results.

Good practice – Tailored choice

For tasks that don't transform data, .forEach() walks the runway. When transformations are the theme of the show, .map() struts in style, creating new arrays in haute couture.

explain-codes / Javascript / Javascript: Difference between .forEach() and .map()

Linked

From an array of objects, extract value of a property as array



Go to "next" iteration in JavaScript forEach loop



Add property to an array of objects



Get loop counter/index using for…of syntax in JavaScript



Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables?

