Map vs. forEach: Which one to use?

When I first started learning array iterations, I came across two different but seemingly similar array methods. Array.prototype.map() and Array.prototype.forEach().

So, what's the difference?

Definition of .map and .forEach

• map(): creates a new array that populates the results of calling a provided function on every element in the calling array

• forEach(): executes a provided function once for each array element

What Doest This Mean?
The forEach() method doesn't actually have a built-in return value, meaning it will return undefined. This makes the forEach() method generic which makes it an attractive option to choose. However, this method should be used when you can't use a method that is more specialized. A common way for using forEach() is trying to print contents to the screen.

The .map() method is specialized. it will have a return value and will create a new array the same size as the array it is copying. It is important to note that this method will not change the original array.

Syntax
.forEach():
array.forEach(function(currentValue, index, arr), thisValue)
Parameters:

• function(): a function to run for each array element
• currentValue: the current value being processed in the array
• index (optional): the index of the current element
• arr (optional): The array of which the .forEach was called upon
• thisValue (optional): Values to use “this” when executing a “callback function”. The default value is undefined.

Return Value: undefined

.map():
array.map(function(currentValue, index, arr), thisValue)

• function(): a function to run for each array element
• currentValue: the current value being processed in the array
• index (optional): the index of the current element
• arr (optional): The array of which the .map was called upon
• thisValue (optional): A value passed to the function to be used as its “this” value. The default value is undefined.

Return Value: The results of a function for each array element

Coding Examples
Let us see some examples in which each method can be displayed and used properly.

.forEach() method:

Return Value:

In this example, we are multiplying each number by itself for each element in an array. The forEach method is called for each element and we print or log the multiplication of the number. We can see that the original array has not changed and the console.log of the returnValue shows as undefined because the return value of a .forEach will always be undefined. Because, forEach method doesn’t create a new array and allows you to modify the source array itself, this is considered a mutator method.

.map() method:

Return Value:

In this example, we are using the same arrays and elements but just switching the forEach iteration with the .map iteration. As you can see, we get two different results when using the different methods. Looking at the example, when we console logged the numberArray, the array has remained unchanged but the return value of the .map iteration created a new array which is built by multiplying a number to each element of the array. Unlike the .forEach method which had a return value of undefined, the .map gave us a return value of each number multiplying by itself. Through our example, the .map creates a new array by applying the callback function on each element of the source array. Since the original array is not changed, we can say that .map uses an immutable method.

Which One Is Better?
Once we’ve established the difference between the two methods. Now it comes to the question: how do we know when to use the forEach method or the map method?

This question depends on what you are trying to accomplish.

One might favor the forEach method when you just want to loop through each element and not worried about changing the data in the array. Someone might just want the array to do something just as saving it to a database or console logging it out:

For example:

One might favor the map method when you want to change or alter the data. This is preferable when changing or altering data because it doesn’t modify the original array and returns a new array. Because of this, the original array is kept intact and unchanged. Because it returns a new array, this means that you can do things such as chaining which means you can chain other methods or array iterations to the map method.

For example:

In this example, we are mapping over array1 and multiplying each element by 2. After each element is done multiplying, then we filter through the array and only keep the elements that are greater than 50 which is then saved in the array named array2. The final result then gives us an array of [74, 84, 100].

In the end, it’s to know what you’re trying to accomplish so you know which method to use properly but it’s equally important to understand the difference and understand how each method can affect your code.

Sources: MDM, W3Schools, StackOverflow