Javascript performance test - for vs for each vs (map, reduce, filter, find). | by Deepak Gupta | Towards Data Science

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 objects and doing some operation via for loop/ for each / javascript functions and observing the time it takes to execute.
These results are from small examples and may vary as per the operation performed, the choice of execution env. and choice of VM.
// calculated the sum of upVotesconst posts = [   {id: 1, upVotes: 2},  {id: 2, upVotes: 18},   {id: 3, upVotes: 1},   {id: 4, upVotes: 30},   {id: 5, upVotes: 50} ];let sum = 0;console.time('reduce');sum = posts.reduce((s, p)=> s+=p.upVotes,0);console.timeEnd('reduce')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 .
Map/Reduce/Filter/Find are slow because of many reasons, some of them are
They have a call back to execute so that acts as an overhead.There are a lot of corner cases that javascript functions consider like getters, sparse array and checking arguments that are passed is an array or not which adds up to overhead.
They have a call back to execute so that acts as an overhead.
There are a lot of corner cases that javascript functions consider like getters, sparse array and checking arguments that are passed is an 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 depends on not just the performance alone, there are more factors to be considered, some of them are:
Code readability and maintainabilityEase codeQuickness to codeImplementation vs optimizationPersonal choice
Code readability and maintainability
Ease code
Quickness to code
Implementation vs optimization
Personal choice
Personally, I love map, reduce, filter, find and I am using them for a long time. They helped me write clean, precise, fast and to the point code which aligns with my thought process. I use for a loop when I have no choice left.
As far as optimization is concerned, map/reduce/filter/find a replacement should be the last option or not an option depending upon what level of optimization 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 the large data set and heavy computation.
I write articles on overflowjs.com and part 2 of this article comparing ramada inline caching warm cache, and some of GC stuff. So, Don't forget to stay tuned on overflowjs.com
Please consider entering your email here if you’d like to be added to my email list and follow me on medium to read more article on javascript and on github to see my crazy code. If anything is not clear or you want to point out something, please comment down below.
Javascript Execution Context and HoistingJavascript — Generator-Yield/Next & Async-Await 🤔Understanding Javascript ‘this’ keyword (Context).Javascript data structure with map, reduce, filterJavascript- Currying VS Partial ApplicationJavascript ES6 — Iterables and IteratorsJavascript performance test — for vs for each vs (map, reduce, filter, find).Javascript — ProxyJavascript — ScopesImage Object detection with Tensorflow-js 🤔Nodejs app structure — To build highly scalable architecture.Node.js 10.0.0, What to expect as a Backend developer/Security enthusiast?Image Processing — Making Custom Image Filters in React.jsGoogle India Interview Questions
Javascript Execution Context and Hoisting
Javascript — Generator-Yield/Next & Async-Await 🤔
Understanding Javascript ‘this’ keyword (Context).
Javascript data structure with map, reduce, filter
Javascript- Currying VS Partial Application
Javascript ES6 — Iterables and Iterators
Javascript performance test — for vs for each vs (map, reduce, filter, find).
Javascript — Proxy
Javascript — Scopes
Image Object detection with Tensorflow-js 🤔
Nodejs app structure — To build highly scalable architecture.
Node.js 10.0.0, What to expect as a Backend developer/Security enthusiast?
Image Processing — Making Custom Image Filters in React.js
Google India Interview Questions