7 ways to iterate over arrays in JavaScript

7 ways to iterate over arrays in JavaScript

Ravin 's photo
Ravin
ยทMar 17, 2022ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • 1. FOR-LOOP
  • 2. WHILE-LOOP
  • 3. DO-WHILE
  • 4. FOR-EACH
  • 5. MAP
  • 6. FOR-IN
  • 7. FOR-OF
  • Outro

A "clean" iteration is just one that goes from the beginning to the end of the array with no conditions attached to it.

This implies that we will not be employing methods such as filter( ), every( ), or some( ) since they include inherent conditions.

The following is the input array that we will use:

const animals = ["๐Ÿผ", "๐ŸฆŠ", "๐Ÿป", "๐Ÿฆ", "๐Ÿต"];

1. FOR-LOOP

The standard for loop that we are familiar with from classic programming languages such as C, C++, and Java.

It defines and initialises the iteration variable, as well as sets the condition and increments it. The variable's count after each loop

for (let i = 0; i < animals.length; i++){
    console.log( i );
}

2. WHILE-LOOP

The while loop, like the for-loop, is well-known due to most classical programming languages, as we've previously discussed.

While the specified condition is true, it iterates across the array.

Note: Don't forget to increment the count. Otherwise, it will return in an unpleasant infinite loop.

let i = 0;
while(i < animals.length){
    console.log(animals[i]);
}

3. DO-WHILE

Unlike the typical while-loop, which tests the condition first before executing the statements inside its block, the do-while loop executes the declared statements until the condition evaluates to false.

Note: Same as when using the traditional while loop, don't forget to increment the count.

let i = 0;
do {
   console.log(animals[i]);
   i++;
}
while( i < animals.length);

4. FOR-EACH

For every element in the array, the forEach method runs the function wrapped in parentheses.

The forEach function always returns undefined, unlike other iteration methods that may return a new array.

The forEach method does not affect the original array, but the callback function may if specified.

animals.forEach( animal => console.log(animal));

5. MAP

The map method iterates across a specified array, creating a new one after applying the callback function to each element in the original array.

Note: If you're not going to utilise the generated array, don't use the map method. Choose an iteration technique that does not need the formation of a new array. If the callback function does not return a value, neither does it.

animals.map( animal => console.log(animal));

6. FOR-IN

The for-in statement is mostly used to iterate through an object's attributes, but it can also be used to traverse across arrays.

Note: Be careful when using the for-in statement with arrays, since the indexes are not returned in a particular order and could result in unexpected behaviours. When in doubt, better choose a different iteration method, like for-loop or for-each.

for(animal in animals){
   console.log(animals[animal]);
}

7. FOR-OF

The for-of statement constructs a loop that can iterate not just over arrays but also over any iterable object, such as strings or maps.

For arrays, the for-of statements are always preferable to the for-in statements, and their syntaxes are quite similar, thus it's best to use the for-of over the for-in.

for(animal of animals){
   console.log(animal);
}

Outro

So there was my comprehensive post on the seven different methods to iterate through arrays in JavaScript. Please let me know if I missed anything in the comments area. Your feedback allows me to improve as a content creator.

ย 
Share this