Javascript Performance Test 2019 [Part-1] - for vs for each vs (map, reduce, filter, find).


We all know that for loop are faster than for each or javascript function, since under the hood of javascript functions might be using for loops or something else which I’m not sure. I did a simple test with an array of object and doing some operation via for loop/ foreach / javascript functions and observing the time it take to execute.

Note: These results are from small examples and may vary as per the operation performed, the choice of execution env. and choice of VM.

1. Reduce vs for loop vs foreach

// calculated the sum of upVotes
const posts = [ 
  {id: 1, upVotes: 2},
  {id: 2, upVotes: 18}, 
  {id: 3, upVotes: 1}, 
  {id: 4, upVotes: 30}, 
  {id: 5, upVotes: 50} 
let sum = 0;
sum = posts.reduce((s, p)=> s+=p.upVotes,0);
sum = 0;
console.time('for loop');
for(let i=0; i<posts.length; i++) {
    sum += posts[i].upVotes;
console.timeEnd('for loop');
sum = 0;
console.time('for each');
posts.forEach(element => {
    sum += element.upVotes;
console.timeEnd('for each');

Note: Below is the list of results and code can be found here . All the results clearly shows that for loop are more proficient than for each than map/reduce/filter/find.

Map/Reduce/Filter/Find are slow because of many reason, some of them are

  1. They have a call back to execute so that act as a overhead .

  2. There are lot of corner cases that javascript function consider like getters, sparse array and checking arguments that are passed is array or not which adds up to overhead.

I found a lib. that reimplement several common builtin native JavaScript functions.

But the choice of usage depend on not just the performance alone, there are more factors to be considered, some of them are:

  1. Code readability and maintainability

  2. Ease code

  3. Quickness to code

  4. Implementation vs optimisation

  5. Personal choice

Personally I love map, reduce, filter, find and I am using them from a long time. They helped me write clean, precise, fast and to the point code which align with my thought process. I use for loop when i have no choice left. As far as optimisation is concerned, map/reduce/filter/find replacement should be the the last option or not an option depending upon what level of optimisation is required.

Note: If you’re using loops, always use them idiomatically since compilers are now smart enough to correctly optimize idiomatic loops

Update: Here you can find the result for large data set and heavy computation.

If anything is not clear or you want to point out something, please comment down below.

Part -2 with more comparison with ramda.js function, large data set, considering warm cache and other factors.

So Stay Tuned :)

Check out articles on Javascript, Angular, Node.js, Vue.js



About Deepak Gupta

Deepak is profound programmer and financial educator in India. He has co-founded couple of startup from scratch and worked in more than 12 startup and big corporate with different roles.

Owing to his interest, he has been writing blogs regarding JavaScript and other framework to help people starting with it. Also, love to educate people about trading and cryptoworld in his free time.