What use does the JavaScript forEach method have (that map can't do)?
Solution 1
The essential difference between map
and forEach
in your example is that forEach
operates on the original array elements, whereas map
explicitly returns a new array as a result.
With forEach
you are taking some action with -- and optionally changing -- each element in the original array. The forEach
method runs the function you provide for each element, but returns nothing (undefined
). On the other hand, map
walks through the array, applies a function to each element, and emits the result as a new array.
The "side effect" with forEach
is that the original array is being changed. "No side effect" with map
means that, in idiomatic usage, the original array elements are not changed; the new array is a one-to-one mapping of each element in the original array -- the mapping transform being your provided function.
The fact that there's no database involved does not mean that you won't have to operate on data structures, which, after all, is one of the essences of programming in any language. As for your last question, your array can contain not only numbers, but objects, strings, functions, etc.
Solution 2
The main difference between the two methods is conceptual and stylistic: You use forEach
when you want to do something to or with each element of an array (doing "with" is what the post you cite meant by "side-effects", I think), whereas you use map
when you want to copy and transform each element of an array (without changing the original).
Because both map
and forEach
call a function on each item in an array, and that function is user-defined, there is almost nothing you can do with one and not with the other. It's possible, though ugly, to use map
to modify an array in-place and/or do something with array elements:
var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.map(function(el) {
el.val++; // modify element in-place
alert(el.val); // do something with each element
});
// a now contains [{ val: 2 }, { val: 3 }, { val: 4 }]
but much cleaner and more obvious as to your intent to use forEach
:
var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.forEach(function(el) {
el.val++;
alert(el.val);
});
Especially if, as is usually the case in the real world, el
is a usefully human-readable variable:
cats.forEach(function(cat) {
cat.meow(); // nicer than cats[x].meow()
});
In the same way, you can easily use forEach
to make a new array:
var a = [1,2,3],
b = [];
a.forEach(function(el) {
b.push(el+1);
});
// b is now [2,3,4], a is unchanged
but it's cleaner to use map
:
var a = [1,2,3],
b = a.map(function(el) {
return el+1;
});
Note as well that, because map
makes a new array, it likely incurs at least some performance/memory hit when all you need is iteration, particularly for large arrays - see http://jsperf.com/map-foreach
As for why you'd want to use these functions, they're helpful any time you need to do array manipulation in JavaScript, which (even if we're just talking about JavaScript in a browser environment) is pretty often, almost any time you're accessing an array that you're not writing down by hand in your code. You might be dealing with an array of DOM elements on the page, or data pulled from an Ajax request, or data entered in a form by the user. One common example I run into is pulling data from an external API, where you might want to use map
to transform the data into the format you want and then use forEach
to iterate over your new array in order to display it to your user.
Solution 3
The voted answer (from Ken Redler) is misleading.
A side effect in computer science means that a property of a function/method alters a global state [Wikipedia]. In some narrow sense, this may also include reading from a global state, rather than from arguments. In imperative or OO programming, side effects appear most of the time. And you are probably making use of it without realizing.
The significant difference between forEach
and map
is that map
allocates memory and stores the returning value, while forEach
throws it away. See the ECMA specification for more information.
As for the reason why people say forEach
is used when you want a side effect is that the return value of forEach
is always undefined
. If it has no side effect (does not change global state), then the function is just wasting CPU time. An optimizing compiler will eliminate this code block and replace the it with the final value (undefined
).
By the way, it should be noted that JavaScript has no restriction on side effects. You can still modify the original array inside map
.
var a = [1,2,3]; //original
var b = a.map( function(x,i){a[i] = 2*x; return x+1} );
console.log("modified=%j\nnew array=%j",a,b);
// output:
// modified=[2,4,6]
// new array=[2,3,4]
Solution 4
This is a beautiful question with an unexpected answer.
The following is based on the official description of Array.prototype.map()
.
There is nothing that forEach()
can do that map()
cannot. That is, map()
is a strict super-set of forEach()
.
Although map()
is usually used to create a new array, it may also be used to change the current array. The following example illustrates this:
var a = [0, 1, 2, 3, 4], mapped = null;
mapped = a.map(function (x) { a[x] = x*x*x; return x*x; });
console.log(mapped); // logs [0, 1, 4, 9, 16] As expected, these are squares.
console.log(a); // logs [0, 1, 8, 27, 64] These are cubes of the original array!!
In the above example, a
was conveniently set such that a[i] === i
for i < a.length
. Even so, it demonstrates the power of map()
, and in particular its ability to change the array on which it is called.
Note1:
The official description implies that map()
may even change length the array on which it is called! However, I cannot see (a good) reason to do this.
Note 2:
While map()
map is a super-set of forEach()
, forEach()
should still be used where one desires the change a given array. This makes your intentions clear.
Solution 5
You can use map
as though it were forEach
.
It will do more than it has to, however.
scope
can be an arbitrary object; it's by no means necessarily this
.
As for whether there are real uses for map
and forEach
, as well to ask if there are real uses for for
or while
loops.
JohnMerlino
Looking to master Trigonometry and Calculus and an interest in Ruby and JavaScript programming languages. I only use Linux (in particular Ubuntu Desktop) and Android. I like to write as well.
Updated on January 15, 2022Comments
-
JohnMerlino over 2 years
The only difference I see in map and foreach is that
map
is returning an array andforEach
is not. However, I don't even understand the last line of theforEach
method "func.call(scope, this[i], i, this);
". For example, isn't "this
" and "scope
" referring to same object and isn'tthis[i]
andi
referring to the current value in the loop?I noticed on another post someone said "Use
forEach
when you want to do something on the basis of each element of the list. You might be adding things to the page, for example. Essentially, it's great for when you want "side effects". I don't know what is meant by side effects.Array.prototype.map = function(fnc) { var a = new Array(this.length); for (var i = 0; i < this.length; i++) { a[i] = fnc(this[i]); } return a; } Array.prototype.forEach = function(func, scope) { scope = scope || this; for (var i = 0, l = this.length; i < l; i++) { func.call(scope, this[i], i, this); } }
Finally, are there any real uses for these methods in JavaScript (since we aren't updating a database) other than to manipulate numbers like the following?
alert([1,2,3,4].map(function(x){ return x + 1})); // This is the only example I ever see of map in JavaScript.
-
JohnMerlino almost 14 yearsBut why is both "scope" and "this" being called here: func.call(scope, this[i], i, this); Isn't scope a parameter that is equal to the current object, which is "this"?
-
wombleton almost 14 yearsNo, it can be equal to the current object. The object itself is passed as the third parameter to the array.
scope = scope || this
means "ifscope
is falsy (undefined, null, false, etc) set scope tothis
instead and carry on". -
JohnMerlino almost 14 yearsCan you link me to an example when it's not equal to this?
-
wombleton almost 14 yearsdeveloper.mozilla.org/en/Core_JavaScript_1.5_Reference/… has one under "Printing the contents of an array with an object method"
-
Antti Haapala -- Слава Україні almost 10 yearsActually there is 1 thing that forEach can do that map can't do - not return an array.
-
pdoherty926 over 9 yearsYou can also use the third argument to the mapping function to mutate the target array, instead of the scoped variable:
mapped = a.map(function (x, i, arr) { arr[i] = x * x * x; return x * x; });.
-
Travis Webb about 9 yearsnote from the future: this answer is actually nonsense;
.map
can do everything.forEach
can do (including modifying elements), it just returns a new list constructed from the iterator function. -
Ken Redler about 9 yearsResponding from the past: I respectfully disagree.
.map()
creates a new array, and does not alter the original. You could indeed modify the array that is itself being mapped, but that would be at the very least non-idiomatic, if not nonsensical..forEach()
, while similar, applies its function to each element, but always returnsundefined
. Notwithstanding all the above, the OP is also asking about his own specific functions added to the array prototype; there was no ES5 back here in the past. -
poke over 8 yearsThere’s still nothing that
forEach
does that you can’t do withmap
. You could simply not care about the return value frommap
and you’d have aforEach
. The difference is that it’s super ineffective to usemap
for tasks where you don’t want to create a new array based on results. So for those, you useforEach
. -
Ken Redler over 8 years@poke: ..and likewise, you could do whatever you need with a plain old
for
loop. I don't disagree that there's some difference in "effectiveness", but also I don't think anyone's arguing that one has some magic the other can't somehow achieve. Although there is, in fact, one thing thatmap
cannot do: not return an array. There's value in having JS live up to expectations from other languages as to the behavior of functional favorites likemap
,reduce
,filter
, etc. E.g., you could implementreduceRight
using similar building blocks, but why not just usereduceRight
? -
conny about 8 years@pdoherty926 true, but so can
a.forEach(function(x, i, arr) { ...
, which, again, is a conceptually more correct way when you there is an intention to mutate each original item as opposed to map values from one array to another -
Sumukh Barve about 8 years@conny: Agreed. Also, please see this answer, to a similar question.
-
maschwenk about 8 yearsI think this is misleading because unless your map closure returns an element, you can easily modify the original array if you're not careful.
-
Ken Redler about 8 years@maschwenk, how do you mean? If the function passed to
map
returns nothing (i.e.undefined
), you'd end up emitting a new array ofundefined
elements. The original array would remain unchanged unless you really went out of your way to change it. -
maschwenk about 8 yearslook at the first example in @nrabinowitz answer
-
Ken Redler about 8 years@mashwenk, I think this is just a matter of your viewing the modification of original array elements as being easy to do if you're not careful, and my viewing it as departing from the idiom enough to be something you'd have to go out of your way to do. Likewise, @ nrabinowitz just considers it "ugly". We're all in agreement it's possible; "easy" vs "awkward" vs "ugly" are matters of opinion and style. As a side note, it's amusing how much voting activity, commentary, and even occasional vitriol (I don't mean your comment) this question generates.
-
Chinoto Vokro over 7 yearsThe output of
a=[{val:1},{val:2},{val:3},{val:4}]; a.map((b)=>{b.val=b.val**2}); JSON.stringify(a);
is[{"val":1},{"val":4},{"val":9},{"val":16}]
. I'm not sure if you're wrong or merely being unclear, but.map()
does operate on the original array elements, just as.forEach()
does, so I'm not sure why you specifically make that point with.forEach()
. -
chovy over 7 yearsi see people using
.map()
all the time to modify inline elements. I was under the impression that was the main benefit of using.map
over.forEach
-
leewz over 7 years@chovy I believe that you should choose based on whether you want to make an array of results.
.map
can modify elements, yes, but it would create an array you don't need. You should also consider how choosing one or the other lets the reader guess whether or not you have side-effects -
Ken Redler over 6 years@ChinotoVokro, your example is explicitly mutating the original array by assigning
b.val = b.val**2
inside the returned object. That's the precise thing we're saying is indeed possible but confusing and non-idiomatic. Normally you simply return the new value, not also assign it to the original array:a=[{val:1},{val:2},{val:3},{val:4}]; a.map((b)=>{b.val**2}); JSON.stringify(a);
-
Chinoto Vokro almost 6 years@KenRedler I was confused by my own comment until I thought to look at your edit history. When I originally commented on this, there was no mention of "idiomatic usage", just that
.forEach()
operates on the original array elements, which in my mind implied that.map()
somehow doesn't, so I was showing that it can. You are certainly correct that, idiomatically, map shouldn't change the original array. -
ruffin almost 6 yearsI think the take-home is that you can't return a new array from a call to
forEach
and chain operations dare he say "[LINQ-style"?], which meansmap
's behavior lends itself to functional logic in a wayforEach
simply can't. If you want to be anti-pattern withmap
, you can, of course, but... why? Why not use the right tool for your job? That's precisely why we haveforEach
&for
. Self-comment your code, please. Someday, someone else might have to maintain it. ;^) -
AndrewL64 over 5 yearsThe discussion on this thread is gold (and I'm not even being sarcastic) lol
-
Ken Redler over 5 years@AndrewL64 I stopped answering questions on SO ages ago; this is the only one that continually attracts new comments. There have even been a bunch of comments that have had to be removed because they violated community rules for polite discourse. People literally insulting each other. It's quite enjoyable.
-
Ken Redler over 4 yearsThis question and its answers and comments are always fun to circle back on every couple of years. The way map is implemented in JS, in terms of memory allocation, is another nice angle.