The differences between map() and forEach()

In javascript, there are many methods to work with arrays
but some of them are a little bit confusing for most of the developers. the most common methods among javascript array methods are map() and forEach() methods but the majority of developers don't know when to use map() and forEach() and are not familiar with their differences.
in this article, I am going to completely describe this for you

map()

the map()method is a useful method and is used to repeat the same operation on every element of the array(just like a loop) and then return a new array with the same number of elements.

syntax:

Array.map(function(currentValue, index, arr), thisValue)

the first argument represents the current element(required)

the second argument represents the index of the current element(optional)

and the third argument represents the array object that an element belongs to(optional)

let arr = [21, 54, 32, 67, 90]
arr.map((element, index) => {
   console.log(`element:${element} index:${index}`)
})

//map() method
output :  
   element:21 index:0
   element:54 index:1
   element:32 index:2
   element:67 index:3
   element:90 index:4

code explanation:

In the example, above we define an array with five elements and took the element and index of the element by map() method and placed them in a string, and repeated this process on all the elements. and if we decide to make this approach by for loop
it would be something like this :

let arr = [21, 54, 32, 67, 90]

for(let x=0; x<arr.length; x++){
   console.log(`elements:${arr[x]} index:${x}`)
}

//for loop
output :  
   element:21 index:0
   element:54 index:1
   element:32 index:2
   element:67 index:3
   element:90 index:4

forEach()

This method is much similar to map() method it receives a function as the first argument and calls them for all the elements
but the main difference is instead of returning a new array it returns undefined and if it doesn't return anything it return a mutated array while map() method returns a new array

array.forEach(function(currentValue, index, arr), thisValue)

the first argument represents the current element(required)

the second argument represents the index of the current element(optional)

and the third argument represents the array object that an element belongs to(optional)

let arr = [21, 54, 32, 67, 90]
arr.forEach(element => element + 3)

//output: undefined 

let arr = [21, 54, 32, 67, 90]
arr.map(element => element + 3)

output: [24, 57, 35, 70, 93]

see! we performed the same operation( *defining a callback function to add 3 to each member * ) on the array with map and forEach but forEach returns undefined

You might say javascript is a little bit strange🤔

channing other methods

Chaining methods means after executing a method we can bind it with some methods such as filter(),splice(),pop(),etc.
and another difference is you can bind other methods to map() method but you can't take this approach with forEach if you do this it returns undefined

with map():

let arr = [21, 54, 32, 67, 90]
arr.map(element => element + 3)//adding 3 to each element 
.filter(element => element > 50) //filtering element bigger than50 

output: [57, 70, 93]

with forEach():

let arr = [21, 54, 32, 67, 90]
arr.forEach(element => element + 3)//adding 3 to each element 
.filter(element => element > 50) //filtering element bigger than50 

output: cannot read property 'filter' of undefined

conclusion

Both map and forEach perform the same process and receive callback function but the performance of these two methods is different, but is it important to know?🤔

It completely depends on you to choose map or forEach
if you are going to mutate or alternate the element, you should use map() because it returns a new array with mutated elements
but whenever you don't need a returning array you should use forEach

If you have any questions,suggestions or criticism please leave a comment

😊 Thanks for reading this article 😊
🙏🙏🙏🙏🙏🙏

Comments

[Renan Reis]

Hi Arsham,

You mentioned
"we performed the same operation( *defining a callback function to add 3 to each member * ) on the array with map and forEach but forEach returns undefined".

Just few observations here, you did not really performed the same operation. If you print your "int" array after a "forEach" you will see that the array still contain the same values. You use such construction to perform some side-effect, if you have an "object" for example, you can mutate it or even print on screen, as you did.

"if you are going to mutate or alternate the element, you should use map() because it returns a new array with mutated elements"

Usually you do not mutate elements on a map call, the map will return a new array with the new elements for you, preserving the old array. If you are mutating the elements instead of returning a new one, then forEach is more appropriated and less functional, semantically speaking.

You did a great work on such concise explanation. Keep rocking.