Over the last week or two, I’ve written a lot about modern array methods like
One of the questions I’ve been asked a lot during the series is:
What impact do these methods have on performance vs. using an old-school
Rebecca Turner had already done some benchmarking on this, and told me that the modern are actually faster that
To be honest, I found this surprising. Given that
for loops have been around forever, I assumed browsers would be optimized for them in a way that they’re not with the more modern methods.
I was curious about just how much faster the modern methods are, so I set up some tests on JSPerf. Here’s what I found:
forloops and the
forEach()method perform pretty close to each other.
- Methods like
filter()are about twice as fast as using
forEach()and pushing to a new array to do the same thing.
forEach()for multi-step manipulation is about twice as fast as chaining methods like
What this means for you
The obvious win here is that modern array methods are not just easier to write and work with, but also more performant. That’s great!
On older browsers, that might not be the case. But honestly, I’m not generally worried about performance with native browser methods and APIs. An approach may be slower relatively speaking, but still really fast in the absolute sense. Performing 1,000 operations a millisecond is still really impressive!
Along those lines, what should you do when performing multi-step manipulation? (For example, finding only items with a certain value, and then returning just a subset of data.)
In absolute terms,
forEach() is faster than chaining methods. But the chained methods are still pretty damn fast!
Personally, I would optimize for readability of the code. Even if one approach is faster, it’s all still really fast!