0

I have a general understanding of the differences between forEach and map by reading docs and conversation with coworkers. I found this post to be especially helpful. In the post, they suggest a time when you might want to use forEach:

forEach() may be preferable when you’re not trying to change the data in your array, but instead want to just do something with it — like saving it to a database or logging it out

Can anyone else share times that they've intentionally used forEach instead of map?

Map seems to be preferable in most cases.

syndacks
  • 31
  • 2
  • Search for `forEach` in any big open-source JS code. You'll find it. – Denys Séguret Jun 06 '18 at 16:20
  • 3
    `map` creates a new array, if you don't need a new array `map` wouldn't be a good choice. – Teemu Jun 06 '18 at 16:23
  • You would never use `forEach`. When you don't need to produce another value (like `map` does), just use a `for…of` loop. – Bergi Jun 06 '18 at 16:25
  • `map` **maps** original elements to new elements in a new array. If you're not doing any mapping without the need of a new array and just want plain iteration over an array, use `forEach`. – Andrew Li Jun 06 '18 at 16:25
  • `forEach`and `map` serve completely different purposes. The former is for when you want to _do_ something with every element of an array. The latter is for when you want to _transform_ every element of an array into something else. Perhaps you could tell us why you think "Map seems to be preferable in most cases". – JLRishe Jun 06 '18 at 16:27
  • @Bergi That is, unless you're targeting IE and your project is not set up for ES5 transpilation. – JLRishe Jun 06 '18 at 16:31
  • 1
    @JLRishe If you're targeting old IE, you cannot use `forEach` either :-) You need either a polyfill or a transpiler anyway. – Bergi Jun 06 '18 at 16:32
  • @Bergi `forEach` is natively supported in IE 9+ which surely covers 99% of remaining IE users. If you need to support anything older than that, it can _very easily_ be polyfilled. `for..of` cannot. – JLRishe Jun 06 '18 at 16:35

2 Answers2

1

You use map() if you want to create a new array containing the result of some operation on the elements of the original array. For instance:

let nums = [1, 2, 3, 4];
let squares = nums.map(n => n * n);

You use forEach() if you want to loop through the array, but aren't creating a new array with the results. It might be because you just want to perform some other operation using the elements of the array:

nums.forEach(n => console.log(n));

or you want to populate an array conditionally:

let evenSquares = [];
nums.forEach(n => {
    if (n % 2 == 0) {
        evenSquares.push(n * n);
    }
});

or you want to modify things in the array but don't need to return anything new:

let objects = [{a: 1}, {a, 2}, {a: 3}];
objects.forEach(obj => obj.a++);
Barmar
  • 741,623
  • 53
  • 500
  • 612
0

foreach() and map() perform 2 different functions. Briefly,

  • foreach will iterate over every element in the list and do something with it.
  • map on the other hand transforms a list. It iterates over every element in the list, does some operation to the list, and returns a new list.

This similar question has some great answers: JavaScript: Difference between .forEach() and .map()

shujew
  • 41
  • 3