Take this array :
Case #1 : Change each value with something else
Based on our
spiderMovies array, we want to create a new array containing only the titles to have something simpler. So we need to iterate over each array's value and keep only the
title property. For this kind of case,
Array.prototype.map() is the most elegant way to do it, because each value must return something new (or not) and we still maintain the array
length. Finally, you will directly assign the result of your
.map() to a new array variable.
Case #2 : Filter some value
In this case, we simply want to keep only the movies produced after 2010. The most indicated and obvious way to do it is to use
Array.prototype.filter(). Instead of returning a value, you will return
false depending if you want to keep it or not.
Case #3 : Create something new, based on your array
This time, something more tricky; we want to get the sum of all the movies production years (I know, it's pointless). Each time you need to produce something more “complex” based on an array,
Array.prototype.reduce() must be your tool of choice.
As the first two cases,
.reduce() will iterate on each array value, but instead of returning the transformed value as with
.map(), you must return something unique with
.reduce() : the accumulator. Basically, it can be any kind of value (initially defined after the callback method) that will evolve on each iteration.
Case #4 : Do something on each iteration
This time you don't want to create anything, but you want to push array content to your remote database. For some reason and because it's an example, you can only pass one object per push. So you don't want to create or return anything and because of it,
Array.prototype.forEach() is the most elegant way to do it.
At this point, you must think :
“Wtf man! Why are you not using
Good question ! You can surely and it's definitely more efficient on almost any cases I present you above (see this benchmark).
OK, it's more efficient, but what about code readability and elegance ? At this point, you must decide if you can live with this small (in most cases) performance tradeoffs and keep your code clean. At the end, for “small” loops, you won't feel this tradeoff (~0.1ms), but when you start dealing with a large number of iterations, the cost will quickly rise in opposite of your performances.
There is never one true best way for looping through arrays. Based on the example cases above, you should be more aware to pick to right one. It's your call to decide what is best for your case and the sake of your application. And if you are not sure about the right one to use, benchmark your choices using a simple
console.time() and you will be quickly fixed.