What's the difference between map() and forEach()

If this is the first you are reading about these array methods. Let me give you a quick defintion of each of these methods and their purpose, before we dig a little deeper.

From The Mozilla Documentation, The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

From The Mozilla Documentation, The forEach() method executes a provided function once for each array element.

These definitions aren't great, simply put both these methods execute a call back function on each item in an array.

So, to understand the mechanics of these array methods we start first have to start with an array.

Now let's run each method on the array as followed...

Here's the map() method in action

Here's the forEach() method in action

Upon basic execution, both map() and forEach() return the same results and perform the same task.

Now it's time to go a little deeper...

So both both map() and forEach() provide three parameter variables in their call back function. I've named them item, index, array, but feel free to give them any name you (pro tip: refer to the MDN documentation for the proper naming convetions).

We've seen the item variable in action, now lets look at the index variable for these methods.

Here's the map() method in action returing it's index variable parameter

And, here's the forEach() method in action returing it's index variable parameter

Same results...

Here's the map() method in action returing it's array variable parameter

And, here's the forEach() method in action returing it's array variable parameter

Again, they return the same results...

Say, what's going on here? Why do we have two methods that so far do exactly the same thing?

Let's keep digging...

At this point, I'll say about these methods its not what they do that makes them different, but its how they are used that seperates them.

Let's explore

So we looked at all these parameter variables item, index, array right?

Welp, another similarty is that both those variables go the way of the dodo when we want to use a custom callback function.

So here comes the difference, lets try another call back function that modifies specifically each element in the array.

Why forEach() returns undefined is because by nature this method restricts any modification to the elements inside of the array. The method only allows read only access to the items in the array.

Here's another example. Lets see what happens when we set each of these methods to a variables

The reason forEach() returns undefined when set to a variable is because it executes a call back once on each item to an array.

So there is a conflict of usage when setting that callback execution to a variable. The browser doesn't know how to interpret one variable set to the results of a callback on each item.

Unlike forEach(), the map() method creates a new array on execution, so setting it to a variable will simply return the items recreated as a new array.

As of right now, that's all I have to say about these array methods by making a comparission I hope I've demostrated how they function and there purpose on a deeper level.

If you have any question feel free to make a pull request on this repo and commit your questions.

This site is also suplemental material for an article I wrote on the subject called The power of the map method