Iterating over JavaScript Array in Different ways

Iterating over an array means going through each and every element present in the array and perform some function. In Javascript, there are several ways to iterate over an array. Learning those different approaches helps us in better understanding of javascript.

We will learn iterating over an array using,

  • while loop
  • do-while loop
  • for loop
  • for-in loop
  • for of loop
  • forEach method
  • Iterator method

 

Iterating over Array using while loop

This is one of the simplest implementations of loops. The while loop executes as long as the condition is satisfied. It is a ‘check first, execute then’ type of loop. If the condition is not satisfied, the control does not enter the loop at all.

In the below example, we implemented two sets of while loops. In the first set, we have array arr and variable set to 0. We check the condition that i should be less than the length of the array. Inside the loop, we print the elements and increment the i value. In the second set, i is set to 10 which is greater than the length of the array. So when the while condition is checked, it fails and the loop never runs.

arr = [1, 5, 14, 19, 25, 29]

console.log('Set 1')
i = 0
while (i < arr.length) {
    console.log(arr[i])
    i++
}

console.log('Set 2')
i = 10
while (i < arr.length) {
    console.log(arr[i])
    i++
}
Set 1
1
5
14
19
25
29

Set 2

 

Iterating over an Array using do-while loop

This loop is almost similar to the while loop. The only difference is that it iterates first and then checks the condition. Even if the loop condition is false, the loop runs at least once. Therefore it is called as ‘execute first, check then’ type of loop.

In the below example, we implemented two sets of the do-while loop. In the first set, the initial condition is true. therefore the loop runs as long as the condition becomes false. But in the second set, the initial condition is false, but still loop runs once before terminating.

arr = [1, 5, 14, 19, 25, 29]

console.log('Set 1')
i = 0
do {
    console.log(arr[i])
    i++
} while (i < arr.length)

console.log('Set 2')
i = 10
do {
    console.log(arr[i])
    i++
} while (i < arr.length)
Set 1
1
5
14
19
25
29

Set 2
undefined

 

Iterating over an Array using for loop

This loop consists of three types of optional expressions namely, loop initialization, test condition, and iteration statement. In the loop initialization, the loop variable gets initialized. Then the control goes to the test condition where the loop condition is checked. If the condition is false, control exits out the loop. Else loop is executed. Then the control goes to the iteration statement and then the test condition.  This process continues till the condition becomes false.

In the below example, the first set runs for the array’s length times. But in the second set, the loop does not get executed because the initial test condition becomes false.

arr = [1, 5, 14, 19, 25, 29]

console.log('Set 1')
for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

console.log('Set 2')
for (i = 10; i < arr.length; i++) {
    console.log(arr[i])
}
Set 1
1
5
14
19
25
29

Set 2

 

Iterating over an Array using a for-in loop

This is one of the types for loop where the loop is iterated over an object’s enumerable property. In the below example, we iterate over the array using for-in. The variable i inside the loop, will hold the index values of the elements, and using that, we access the array elements.

arr = [1, 5, 14, 19, 25, 29]

for (i in arr) {
    console.log(arr[i])
}
1
5
14
19
25
29

 

Iterating over an Array using the for-of loop

This is another kind of loop and it does the job the same as other loops. It iterates over the array almost like the for-in loop, but here, the loop variable does not hold the index value but the element itself. Therefore, no need to use the square bracket with an array to access the element.

arr = [1, 5, 14, 19, 25, 29]

for (i of arr) {
    console.log(i)
}
1
5
14
19
25
29

 

Iterating over an Array using forEach method

The forEach method takes in a function as an argument, and the method calls the function for each element present in the array and performs some function. In the below example, we call the forEach method for the array, and we provide a function to it. Inside the function, we print the element.

arr = [1, 5, 14, 19, 25, 29]

arr.forEach(element => {
    console.log(element)
});
1
5
14
19
25
29

 

Iterating over an Array using an Iterator

In Javascript, iterators is a structural way to pull out data at one at a time fashion. It will not loop through each element in the array. Instead, it will set an iterator and by using the next() method, we can access the next element.

In the below example, we create an iterator. When we use next(), returns an object which contains two key-value pairs. The first key is the value that corresponds to the value of the element present in the array. The next is a done key which states whether there are still some elements in the array or not. In the output, the last value of the done attribute is true, stating that there are no more elements present in the array.

arr = [1, 5, 14, 19]

iterator = arr[Symbol.iterator]()

console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
{ value: 1, done: false }
{ value: 5, done: false }
{ value: 14, done: false }
{ value: 19, done: false }
{ value: undefined, done: true }

 

Please post your comments, doubts, queries in the comment box. Happy Learning 🙂

Also, read

Leave a Reply

Your email address will not be published. Required fields are marked *