Last Updated: December 18, 2023
·
1.234M
· afshinm

Don't use Array.forEach, use for() instead

Array.ForEach is about 95% slower than for() in for each for Arrays in JavaScript.

So, don't use:

arr.forEach(function (item) {
someFn(item);
})

Use:

for (var i = 0, len = arr.length; i < len; i++) {
someFn(arr[i]);
}

See this performance test online: http://jsperf.com/fast-array-foreach

19 Responses
Add your response

How about for of loop ?

over 1 year ago ·

very good

over 1 year ago ·

Thank you for this site!

over 1 year ago ·

I wonder how often you actually need forEach anyway, you'll more often be using .map, .filter or .reduce anyway. Or is a for loop still faster?

over 1 year ago ·

It is about how functional you want to be. A for loop is not that functional so I would sacrifice performance over maintainability and readability.

over 1 year ago ·

I completely disagree with this & please allow to explain why:
Using for loops is easy enough sure, in most cases.. but your overlooking the entire point of map, forEach, filter, reduce, find, findIndex, etc... These make use of functional paradigms, and these paradigms exist for a reason. Functional programming is all about focusing not on how to solve problems and instead, shifts your focus to what to solve. Beyond that, anyone who is worried about performance at this level can go back after they've built their app and measure the app's performance and decide where to optimize (and I will bet you will find most of your optimizations will not be refactoring map, filter, or reduce). Using for loops is like going backwards, not to mention that forEach is slow because it is modifying/mutating the original array, whereas .map() returns a new array, is much faster, and without the side effect of mutating the original array. There are fewer and fewer cases where a for loop is viable. Currently, the best use case would be for something like iterating an async generator function using the new for-await-of syntax. Which is super cool. My point is that javascript gives us first class functions and in combination with it's (sorta) functional paradigms can produce: more readable code, better tooling, composition and patterns like higher order functions and currying, beautiful immutability, and many other wins such as referential transparency with pure functions - which reduce side effects and can increase run time, especially if memoized etc... Although I say "sorta" as obviously you're going to need functions with side effects to make API calls, or logs, or write i/o (any function that has I/O).

Regardless, I hate to say that I think you're giving bad advice here. Sure, everyone should know how to use all the original loops in javascript and use them well, but using a for loop versus map or even forEach (if you just have to mutate that existing array) is going the wrong direction.

over 1 year ago ·

@andrewjhart I agree that map, filter, reduce, find, ... are useful, but forEach is used to produce side effects. Although I usually use map, filter, reduce, find, ... , I still avoid forEach because it is pointless IMO. When I want to iterate over an array to produce side effects, I will use for-of, or use traditional for if index is needed.

over 1 year ago ·

@andrewjhart I will never understand how people can say that .forEach is more readable than an actual loop. Languages have keywords for looping for a reason, because they are core concepts that all programming is based on, your IDE will syntax highlight it and everything. List.map .filter and .reduce can all be useful for sure, I find myself using them frequently enough. Foreach as a function is completely pointless though imo. It is also a pain to debug and step through, which to me is the most obvious inferiority it has. For .. of loops are by far the most readable and nicest to type, but they also seem to have pretty bad performance on large collections.

Object Oriented Programming is readable. Maybe my experience with people who get all into the functional programming idea is limited, but those huge blobs of anonymous functions strung about through generic map/filter/forEachs is the complete opposite of readable, to me at least.

over 1 year ago ·

@andrewjhart @kevinorfas I will never understand how people can say that .forEach is more readable than an actual loop. Languages have keywords for looping for a reason, because they are core concepts that all programming is based on, your IDE will syntax highlight it and everything. List.map .filter and .reduce can all be useful for sure, I find myself using them frequently enough. Foreach as a function is completely pointless though imo. It is also a pain to debug and step through, which to me is the most obvious inferiority it has. For .. of loops are by far the most readable and nicest to type, but they also seem to have pretty bad performance on large collections.

Object Oriented Programming is readable. Maybe my experience with people who get all into the functional programming idea is limited, but those huge blobs of anonymous functions strung about through long spaghetti chains of generic map/filter/forEachs is the complete opposite of readable, to me at least.

Tldr; I completely disagree that functional programming is especially readable or maintainable, at least according to the specific suggestions I hear from people who profess its greatness.

over 1 year ago ·

I disagree. for loop is very verbose and usually if you care about maintainability you should bow for more readability. Performance is something that comes after the app is running in Production for some time...

You are correct, Array.forEach loop is slow, instead use Array.map which does not mutate your array.

over 1 year ago ·

Thank you so much for sharing it!

over 1 year ago ·

OK

over 1 year ago ·

I totally agree.
in addition to being simpler to understand, the code is more readable and organized. These new functions help yes but it is very fashionable. Not to mention that javascript is something that has been obsolete for a long time. It is only used because internet and browser technology regresses instead of evolving. It goes down so much that a desktop program today is faster than a website. A thought that has been reversed over the years.

over 1 year ago ·

I've been accepted your suggestion

over 1 year ago ·

I will try it. thank you.

over 1 year ago ·

Plus misusing Array. was marked in Google Speed Insight as I was testing some of my websites (Wordpress engine). So it's good to know some substitutes. Thank you!

over 1 year ago ·

thank for tip!

over 1 year ago ·
over 1 year ago ·