DEV Community

loading...

Javascript - forEach vs map method in Arrays

shikharsaxena98 profile image Shikhar Saxena ・3 min read

Javascript provides us with different functions to make our development life easy but if you have worked with Javascript for a little while, you understand how weird bugs can pop up if we don't understand the complete need of a function. Arrays in javascript provide two different functions to iterate through an array, Array.prototype.forEach and Array.prototype.map

Definition

map takes one mandatory parameter as an argument which is a function (callback function) that defines what is required to be done to the element. It expects a value to be returned in the callback function and the map() returns a new array with the specified modifications on each value of the original value.

const arr = [1,2,3]
let result = arr.map(val=>{
    return val*2
})
console.log(result) // [2,4,6]
Enter fullscreen mode Exit fullscreen mode

forEach also takes one mandatory parameter which is the callback function that defines what needs to done to the element. Although it does not expect any value to be returned and the complete .forEach() function returns undefined.

const arr = [1,2,3]
let result = arr.forEach(val=>{
    console.log(val*2) // 2 4 6
})
console.log(result) // undefined
Enter fullscreen mode Exit fullscreen mode

Differences

1. Return Value

The main difference between map and forEach is that map returns a new array whereas forEach returns undefined.

2. Mutability

MDN Docs of forEach and map say the following for both of these.

forEach does not mutate the array on which it is called. (However, callback may do so).

map does not mutate the array on which it is called (although callback, if invoked, may do so).

What this basically means is that both of them do not change the original array but the logic inside the callback function may do so.

3. Performance

Performance is arguably one of the most important part of the codebase and hence it makes sense to cover the performance of these two functions.

Although since both these functions have different usecases, there is no universal way to compare both of them equally. I have used the performance APi to cover the performance of both of these functions.

let arr = [2,3,5,6,8,0]

let startTime = performance.now()
arr.forEach(num=>num*2)
let endTime = performance.now()
console.log("TIme taken by forEach is " + (endTime - startTime) +" milliseconds")
Enter fullscreen mode Exit fullscreen mode
let arr = [2,3,5,6,8,0]

let startTime = performance.now()
arr.map(num=>num*2)
let endTime = performance.now()
console.log("TIme taken by map is" + (endTime - startTime) +" milliseconds")
Enter fullscreen mode Exit fullscreen mode

My observations were that map was faster when array size was small but as array size started crossing 10^5, forEach showed better performance.
But feel free to comment down your observations for the same as well.

Bonus - Another thing I noticed is that the use of for loop gave better performance in all cases but it affects the readability of code.

When to use map and forEach

So, we dived deep into how the functions are working and saw how we use them in different cases but how do you figure out which one to use in what situations.

As a rule of thumb, we want to use forEach in cases when we do not want to store the result of the modifications and only want to access the values and perform operations using the value.

So we should use map when we require the resultant array, another advantage of using map is the ability of function chaining.

const arr = [1,2,3,4,5];
const result  = arr.map(x=>x*2).filter(x=>x>=5)
Enter fullscreen mode Exit fullscreen mode

Here the filter function is chained to the map function as it returns an array. This provides easily readable code and keeps the codebase clean.

Conclusion

  • Both forEach and map are powerful functions with different use cases but can be used to do almost everything that the other one does.
  • Using a for loop gives better performance than both the inbuilt functions.
  • map returns the resultant array whereas forEach returns undefined.

Discussion (13)

pic
Editor guide
Collapse
raddevus profile image
raddevus

That's a nice article on a topic that needed to be written up (forEach v map).
Very nice that you provided actual reasons for using one or the other. I notice that a lot of people just use map() because it is the newest and shiniest, but forEach() still has its place. πŸ‘πŸ½

Collapse
shikharsaxena98 profile image
Shikhar Saxena Author

Thank you for the support :)

Collapse
disgustingdev profile image
disgusting-dev

Just a quick note here:
forEach is mutable - means he operates with the same piece of memory, allocated for defined array, but giving some CPU resources for restructuring this piece after some changes in loop

map is immutable - means it just allocates new place in memory for your results, where RAM is giving storaging resources and CPU does much less

So there is always a choice if you need to calculate slower but to save some memory, or vice-versa

Collapse
ui_ao profile image
Ulrich TSAYO

Great explanation!
ThanksπŸ‘ŒπŸ½

Collapse
shikharsaxena98 profile image
Shikhar Saxena Author

Thanks! Let me know if there's some topic you want me to cover

Collapse
andrewbaisden profile image
Andrew Baisden

Cool explanation.

Collapse
shikharsaxena98 profile image
Shikhar Saxena Author

Thanks! Let me know if there's some topic you want me to cover

Collapse
arjunkumardev profile image
ArjunKumarDev

Great explanation

Collapse
mehedihsajib profile image
Mehedi H Sajib

Clear explanation. Thanks <3

Collapse
shikharsaxena98 profile image
Shikhar Saxena Author

Thanks! Let me know if there's some topic you want me to cover

Collapse
ankitasehgal98 profile image
Ankita Sehgal

Great work

Collapse
robvirtuoso profile image
robvirtuoso

Nice! Array map is overused indeed. I see a lot of code using it even if it's not returning anything at all. Bad habit maybe.

Collapse
shikharsaxena98 profile image
Shikhar Saxena Author

Yep, that was my motivation of writing about it