# Javascript methods: forEach vs map

**URL:** <https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861>\
**Category:** General\
**Created:** [May 14, 2020, 5:48pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861 "2020-05-14T17:48:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Damiano](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@Damiano](https://forum.freecodecamp.org/u/Damiano)\
**Post date:** [May 14, 2020, 5:48pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/1 "2020-05-14T17:48:48Z")

</div>

**Tell us what’s happening:**

I’m here to understand the difference between map and forEach.

Suppose I have an array of fruits:

```auto
fruits = [ {
    name: 'banana',
    color: 'yellow'
}, {
    name: 'apple',
    color: 'red'
}];

let newArray = fruits.map(fruit => {
   fruit.price = '€ 1.99';
});

console.log(fruits); 
console.log(newArray);

```

As far as I know map method doesn’t change the original array.  
Why console.log(fruits) doesn’t return the original array?

```auto
[
  { name: 'banana', color: 'yellow', price: '€ 1.99' },
  { name: 'apple', color: 'red', price: '€ 1.99' }
]

```

Why console.log(newArray) returns the following?

`[undefined, undefined]`

Can someone help me with this?  
Thanks a lot

**Your browser information:**

User Agent is: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36`.

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [May 14, 2020, 6:46pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/2 "2020-05-14T18:46:09Z")

</div>

> map does not mutate the array on which it is called (although callback, if invoked, may do so). [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

you don’t return anything from callback , thats why you see [undefined, undefined]

---

<div class="post-metadata">

**Author:** ![Damiano](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@Damiano](https://forum.freecodecamp.org/u/Damiano)\
**Post date:** [May 14, 2020, 8:52pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/3 "2020-05-14T20:52:15Z")

</div>

Hi Annestezia,  
thanks so much for your quick reply.  
If I add a return statement inside the callback function I still don’t understand why I’ll have:

[  
{ name: ‘banana’, color: ‘yellow’, price: ‘€ 1.99’ },  
{ name: ‘apple’, color: ‘red’, price: ‘€ 1.99’ }  
]

instead of:

[  
{name: ‘banana’, color: ‘yellow’},  
{ name: ‘apple’, color: ‘red’}  
];

* * *

Furthermore, I don’t see any difference if I use forEach or map method ☹

---

<div class="post-metadata">

**Author:** ![Catalactics](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/catalactics/32/151364_2.png) [@Catalactics](https://forum.freecodecamp.org/u/Catalactics)\
**Post date:** [May 14, 2020, 8:58pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/4 "2020-05-14T20:58:56Z")

</div>

Hey @Damiano,

- Next time you want to showcase a code, use the ``` backtick so it is easier for everyone to read. See [this post](http://www.freecodecamp.com/forum/t/forum-code-formatting/25574) to find the backtick on your keyboard. The “preformatted text” tool in the editor (`</>`) will also add backticks around text. ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

---

<div class="post-metadata">

**Author:** ![Damiano](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@Damiano](https://forum.freecodecamp.org/u/Damiano)\
**Post date:** [May 14, 2020, 9:07pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/5 "2020-05-14T21:07:28Z")

</div>

Yes sure, I’ll do it

---

<div class="post-metadata">

**Author:** ![snigo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snigo/32/128765_2.png) [@snigo](https://forum.freecodecamp.org/u/snigo)\
**Post date:** [May 14, 2020, 9:12pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/6 "2020-05-14T21:12:46Z")

</div>

Hey @Damiano,

`forEach()` is just a `for` loop wrapped in the function, nothing more. And the same way `for` loop doesn’t produce any value, `forEach` method doesn’t return anything. In contrast `map` method produces value.

Now let’s make an analogy. You’re a postman! You have an array of addresses:

- You will use `forEach` when you need to go to each address and drop the letter or package - no return value. In programming we call this side-effect.

- You will use `map` if you need to take this list and ask how many people live in the each address. And you will do that by copying initial list and adding a column to it (without mutating original). And you will bring back some value. Alright?

Hope that would be enough to understand the difference.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [May 14, 2020, 9:20pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/7 "2020-05-14T21:20:45Z")

</div>

> [@Damiano](#):
>
> As far as I know map method doesn’t change the original array.  
> Why console.log(fruits) doesn’t return the original array?

You have already received awesome answers, so I will just focus on explaining this part.

this goes in a different direction that you may expect  
this happens for the same reason that this happen:

```auto
let a = [1, 2, 3];
// let's make a copy of a
let b = a;
// now let's change a
a[1] = 0;
// and let's try to logs b to be sure it is still the same
console.log(b) //this logs [1, 0, 3]

```

`b` is not the same.

Arrays and objects are passed by reference, so when you just do `let b = a` now both variables reference the _same_ array.

the map method pass each element to the callback function, in this case as they are objects, a reference to the object is passed to the callback, you can do `fruit.price = '€ 1.99'` to change the object.

You are also not using map correctly, as map needs to return the new value of the array element. Your callback function doesn’t return anything.

So the function should be something like `fruit => ({...fruit, price: '€ 1.99'})` so you return an object that includes the price, and the new array will have that object inside.  
This callback function changes nothing, just returns a new value.

---

<div class="post-metadata">

**Author:** ![Damiano](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@Damiano](https://forum.freecodecamp.org/u/Damiano)\
**Post date:** [May 14, 2020, 10:06pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/8 "2020-05-14T22:06:54Z")

</div>

Thanks so much for your replies. These concepts are a bit weird to me at the moment but I hope I’ll understand them better soon 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:53pm UTC](https://forum.freecodecamp.org/t/javascript-methods-foreach-vs-map/388861/9 "2021-06-01T18:53:45Z")

</div>

Closed on June 1, 2021, 6:53pm UTC