141

I've always wondered what the difference between them were. They all seem to do the same thing...

hippietrail
  • 15,848
  • 18
  • 99
  • 158
David G
  • 94,763
  • 41
  • 167
  • 253
  • 7
    Someone added a jQuery tag... considering `every` and `forEach` are not jQuery methods, I think it's unlikely the question relates to jQuery in any way. https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6 – James Allardice Sep 07 '11 at 21:52
  • Am I right in thinking you're referring to the new Mozilla specific array methods as detailed in the link in my previous comment? – James Allardice Sep 07 '11 at 21:56
  • @James - [These are not Mozilla specific](http://msdn.microsoft.com/en-us/library/k4h76zbx(VS.94).aspx). I'd share a link to webkit and opera docs too, but I don't know where they are off the top of my head. – gilly3 Sep 07 '11 at 21:59
  • @gilly3 - Ahh, good point. I believe they are only supported in IE9 though, not below. – James Allardice Sep 07 '11 at 22:01
  • @James - Yes, true, sadly. I usually include a script that adds these methods for older browsers using the implementations at MDN listed under "Compatibility": [`.map()`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map#Compatibility), [`.every()`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every#Compatibility), [`.forEach()`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach#Compatibility) – gilly3 Sep 07 '11 at 22:09
  • @JamesAllardice: They are in the ECMA-262 standard; not all browsers support everything in that standard yet. – Jon Adams Sep 07 '11 at 22:18
  • I think this [link](http://www.quora.com/Do-forEach-every-each-and-map-do-the-same-thing) should have the answer you are looking for. – zBomb Sep 07 '11 at 21:53

4 Answers4

273

The difference is in the return values.

.map() returns a new Array of objects created by taking some action on the original item.

.every() returns a boolean - true if every element in this array satisfies the provided testing function. An important difference with .every() is that the test function may not always be called for every element in the array. Once the testing function returns false for any element, no more array elements are iterated. Therefore, the testing function should usually have no side effects.

.forEach() returns nothing - It iterates the Array performing a given action for each item in the Array.

Read about these and the many other Array iteration methods at MDN.

Pavel Dovlatov
  • 3
  • 2
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • Alternately, the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Methods) could be cited – JoshWillik May 26 '14 at 17:33
  • 3
    @josh - I did cite MDN. Each method name is linked to its corresponding documentation at MDN. – gilly3 May 26 '14 at 19:22
  • @gilly3, my apologies, I glossed over the blue text >.> – JoshWillik May 26 '14 at 20:01
  • .forEach() returns nothing is wrong now, maybe it wasnt in 2012 but in 2015 in Chrome at least, try this arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon']; b = arr2.forEach( function(el, indx) { console.log(indx + ' : ' + el); }); console.log(b); – jason Jun 17 '15 at 02:25
  • @jason - That logs `undefined` for me. Further, the [ES5 Spec](http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.18) and the [ES6 Spec](http://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.prototype.foreach) both state explicitly that `Array.prototype.forEach()` should return `undefined`. – gilly3 Jun 17 '15 at 05:32
  • just for clarify you could add `prototype.some()`. But otherwise good explanation. – Eduard Jacko Jul 09 '15 at 10:26
  • @kresli - Don't be afraid of [the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods). I'm not trying to document all the Array iteration methods (don't forget about `.filter()`, `.reduce()`, and `.reduceRight()`). My answer serves to clarify between 3 methods that seem like they do the same thing. `.some()` doesn't have the same ambiguity issues, since it won't behave the same, nor does it's name sound like it might do the same thing. – gilly3 Jul 09 '15 at 19:27
  • @gilly3 You say the three methods may "seem like they do the same thing", while `some` does not. However, as `some` is the exact opposite of `every` I'd like to argue that the two can be confused, and is as closely related to `every` as any of the other two.IMO @kresli makes a good point that adding a note about `some` in the answer would make it more useful (I actually came here because I was confused about the difference between `some` and `every`). – ArneHugo Feb 03 '16 at 14:31
  • .map iterates over each item and executes a function it doesnt take an original item – Tyrese May 21 '18 at 18:02
  • 1
    @EugeneMercer By "original item" I mean the original value of each element of the array. – gilly3 May 21 '18 at 19:34
  • I have been doing validation manually using foreach, instead I can use `every` which automatically stops iteration if at least one condition is not met. Thank you, this saves me time. – Gangula Jul 19 '23 at 10:28
111

gilly3's answer is great. I just wanted to add a bit of information about other types of "loop through elements" functions.

  • .every() (stops looping the first time the iterator returns false or something falsey)
  • .some() (stops looping the first time the iterator returns true or something truthy)
  • .filter() (creates a new array including elements where the filter function returns true and omitting the ones where it returns false)
  • .map() (creates a new array from the values returned by the iterator function)
  • .reduce() (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things)
  • .reduceRight() (like reduce, but works in descending rather than ascending order)

credit to: T.J.Crowder For-each over an array in JavaScript?

Community
  • 1
  • 1
raphaelgontijolopes
  • 1,263
  • 2
  • 9
  • 10
9

Another consideration to the above great answers is chaining. With forEach() you can't chain, but with map(), you can.

For example: 

var arrayNumbers = [3,1,2,4,5];

arrayNumbers.map(function(i) {
    return i * 2
}).sort();

with .forEach(), you can't do the .sort(), you'll get an error.

biphobe
  • 4,525
  • 3
  • 35
  • 46
Nadine Rose
  • 111
  • 1
  • 3
0

For Ramda, the difference between R.map() and R.forEach() is:

  1. R.forEach() returns the original array whereas R.map() returns a functor
  2. R.forEach() can only operate on array but R.map() can also operate on an object (i.e. the key/value pairs of the object are treated like an array)
Michael Osofsky
  • 11,429
  • 16
  • 68
  • 113