DEV Community

Array.map() much slower than for loop

Henry Williams on April 28, 2019

I was working on some coding challenges when I got the sudden urge to test which approach was faster. For an input size of 1 million numbers, Array...

Read full post

Jesse Verbruggen • Apr 29 '19

This actually is a lot slower since mapping an array will create a copy of each value in order to not modify the original array.

Since a for loop does not copy the values but rather just accesses them using their index, it is a lot faster.

This peformance difference is only noticable when you have a large amount of data. For smaller amounts of data, it's better to write code which feels more natural to you, which may explain why map is used so commonly.

Henry Williams • Apr 29 '19

Thanks for the perspective. I'm going to try out the same test with creating a copy of each value in the for loop

Kaleb M • Apr 29 '19 • Edited

Hi Henry,

Thanks for posting this and doing a test. It's really difficult to truly test out timing of code utilizing timestamps. I recommend the two resources below to better test, because in most cases, the performance of our code is very difficult to measure properly. I'd love to see the results of doing it with a proper test for sure, and how often one has a use case for 1 mill rows of data, since it would be really helpful for us :).

Benchmarking code requires quite a bit of stats and has many factors that are hard to bench mark without a library.

I'd recommend using benchmarkjs.com/ to do your bench marking, and potentially read github.com/getify/You-Dont-Know-JS... to better understanding the proper way to do benchmarking.

I hope that helps!

Henry Williams • May 1 '19

Thanks for the recommendations. I'll definitely check out You Don't Know JS.

Andy Wright • Apr 29 '19

It is slower because it has to create / initialise the callback function passed to it for every item.

There might be other reasons too

diek • Apr 29 '19

As you say, and i want to add something, the map tool returns you an array with the result of every element through the callback, if you don't want this you shouldn't use it.

Henry Williams • Apr 30 '19

But isn't that essentially what the for loop is also doing?

Andy Wright • May 1 '19

Correct. However, you should avoid using the for loop in general, because it will iterate over every property of the item passed to it including things which you might not want to iterate over (like a for in loop would do).

Alternatives to for include: forEach, for of, map etc

Richard Pap • Apr 29 '19

Exactly

Ciro Spaciari • Apr 29 '19

I put your code in a function and i get a perfomance hit in first call and after that its faster
First call in node 11.14.0:
loop: 270.822ms
map: 1293.307ms
Next calls in node 11.14.0:
loop: 366.816ms
map: 259.317ms
undefined

test()
loop: 304.949ms
map: 76.464ms
undefined
test()
loop: 290.823ms
map: 76.344ms
undefined
test()
loop: 293.326ms
map: 73.094ms
undefined
test()
loop: 288.508ms
map: 77.012ms

In chrome i dont get any notable performance hit by using map instead of loop with these code.

Henry Williams • Apr 29 '19

That's interesting. I going to try that.

Dimon4eg • Apr 30 '19

You can also speed up for loop: allocate array with 1M elements and in for loop assign values.

Joshua Johnson • Apr 29 '19

Makes since, array.map calls a callback in a loop, then it's got to coordinate the callback with finishing its execution before it can move on to calling the callback again.

Them more code executions you have to do at the machine level, the slower the code will run.

Rong Sen Ng • Apr 30 '19

Alternatively, for...of loop is another thing you should look into rather than conventional for loop.

Ben Latchford • Jan 8 '20

Well if you consider the map acting as a function on each element, it's also having to create a new stack frame for each iteration.. a lot slower.