Possible ways of Iterating ARRAYS in JavaScript
Tags: webdev, javascript, codenewbie, beginners
Published: 2020-05-29 10:38:39

    
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”.

{% gist https://gist.github.com/aashrithashiva29/8896c76a56704ff26c5b4302cafcee1b %}

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”.

{% gist https://gist.github.com/aashrithashiva29/3c18ba30b10f0a08bd24790b752dc4d1  %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/03663f93c14d4326c1dae37c6f96dc82 %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/e68bb03a203af2e4d697024ea7d8a0a5 %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/678cf80d260ca579999a34897c83112f %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/e9cf0d2c2e1f6b1b28d875564c70b615 %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/ea336edb50d661cd702064f89b582540 %}

#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”.

{% gist https://gist.github.com/aashrithashiva29/3efb9e357caa22bdcea42e5b12282a3f %}

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.

{% gist https://gist.github.com/aashrithashiva29/7f19073f1b823ed982abd621f9d12efa
 %}

- 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.
<br />
Feel free to put your feedback. :) <br />

Thank you guys!