Possible ways of Iterating ARRAYS in JavaScript

Arrays are used to solve most of the coding problems. So when starting with this, there raises a question for everyone i.e “What are the possible ways to iterate arrays and opting which would be the best?”. The main aim of this blog is to find the possible ways and which method performs best.

1. for :

The “for loop” is the common way of iterating an array. The syntax of for takes an initialization followed by condition and then by increment/decrement operation. The example code below depicts the usage of the “for”.

If the condition is written as “i<a.length”, the for loop calculates the length of the array for every iteration and increases the time. So, calculate the length priorly and store it in a variable and make use of it everywhere. This improves the performance of the code.

2. forEach :

“forEach()” invokes the callback function, which is being given, for each element of the array. forEach works only for arrays. The example code below depicts the usage of the “forEach”.

3. while :

“while” is an entry-level condition checking control statement. The condition is being provided to the while loop and if the loop accepts that condition, the control enters into it and executes the statements. If the condition becomes false, the control moves out of the loop. The example code below depicts the usage of the “while”.

4.do-while :

The do-while loop performs exit-level condition checking. So this loop executes a block of code at least once even when the condition is false. The example code below depicts the usage of the “do-while”.

5.for…of :

The for…of statement is used to loop over the data structures that are iterable such as Arrays, Strings, Maps etc. It calls a custom iteration hook with instructions to execute on the value of each property of the object. The example code below depicts the usage of “for…of”.

6.for…in :

for…in is mostly used to iterate over the properties of an object. As for..of operates on the data items of the array directly, for…in loops through the indices of the array. So we must log “a[i]”.The for…in iteration happens in an arbitrary order. The example code below depicts the usage of “for…in”.

7.filter :

“filter” takes an array and filters out unwanted elements based on the condition provided. This way helps us avoiding usage of for or forEach along with conditional statements. It is an available method only for array and the first argument of that is callback. After the callback is executed, a new array is returned with the required result. The example code below depicts the usage of “filter”.

8. map :

There will be a condition that raises for us when we are working with arrays demanding a modification of array elements. “map” method helps us achieve that. It is an available method only for array. Similar to “filter”, map executes a callback on each element and returns a new array with the required result. The example code below depicts the usage of “map”.

Now we have seen the possible ways of iterating the arrays and performing operations on the array elements. FEW THINGS TO BE NOTED…

• It is most commonly suggested that “for…in” not to be used with arrays because we can’t guarantee that the iteration happens in sequence.
• Make better use of ES6 functions map and filter as they make our work more simpler.
• “map” creates a new array by transforming every element in an array individually. “filter” creates a new array by removing elements that don’t satisfy the condition.
• The callback function for the “map” function must have a “return” statement. However the single liner arrow functions use the implicit return but when using {}, “map” assumes it as a body and demands for a return statement.

• When an explicit return is not given, “map” returns undefined but “filter” returns an empty array.

The performance of for…of loop is great compared to for...in and forEach. If it is a casual iteration, it is mostly suggested to go for “for”.


Make use of the above-mentioned methods depending on the situation. I hope this blog helps you better understand the ways of iterating arrays in JavaScript.


Feel free to put your feedback. :)

Thank you guys!

Comments

[Mike Talbot ⭐]

Thanks for the article - it certainly does cover off all of the methods.

I'm just about to write on this subject myself - and having just been researching:

• Firstly your first examples don't seem to line up e.g. (1) says its a for(;;) loop, but your example isn't - it's some kind of filter. There are a couple of others that are also not what the title says.

• Secondly for(;;) loops are held to be fastest - and jsPerf and jsBench.me will tell you that. But run it in your own browser or codesandbox and you may be in for a surprise.

• Thirdly - reading the length every iteration doesn't appear to make any difference, in fact it can be faster because modern browser Javascript engines optimise for it. They know that JS is single threaded and spot the pattern.

[Aashritha Shiva]

• I haven't checked the example issue... I have corrected it. Thanks for this :)
• yeah, I have come to the conclusion after performing the test with performance.now(). But it was wrong. Yes "for loop is the fastest"
• and caching length inside the loop is fine!!
• jsPerf was great And to correct "for..of" is faster compared to for..in and forEach but indeed for is the fastest one over all others. Thanks for listing out these points.

[Iain Freestone]

Your third point is interesting I had wondered about this in the past. Off to look further into this!

[apooja1029]

All the 8 ways given above to Iterating arrays in javascript are fabulous. Thanks for shring such a good information, it helped me a lot.
lettertemplate.org/
manifestationlawofattraction.com/
bestwishesmessages.com/

[Aashritha Shiva]

Thank you for reading. Please refer it out.