Iterating Over Arrays in JavaScript: 4 Methods Compared

Iterating Over Arrays in JavaScript

If you already understand the basics of JavaScript arrays, it's time to take your skills to the next level with more advanced topics. In this series of tutorials, you'll explore intermediate-level topics for programming with arrays in JavaScript.

Iterating over or looping through arrays is something we have to do in almost every project that involves working with arrays. There are many reasons why you might need to loop over an array, such as showing the array data as an output or transforming it.

There are many methods that you can use to iterate over arrays in JavaScript. In this tutorial, we will learn about them all while discussing the advantages or disadvantages of each in detail.

Basics of Accessing Array Elements

Let's start with the basics of accessing array elements using their index. Array indexing in JavaScript starts from 0. This means that the first element will be accessible by using array_name[0] in your code. Similarly, for an array with n elements, the last element will be accessible by using array_name[n - 1].

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

2

3

let first = animals[0];

4

5

let last = animals[4];

6

7

console.log(first);

8

// Outputs: Fox

9

console.log(last);

// Outputs: Zebra

Iterating Using a for Loop

One of the most common ways of looping through arrays is the for loop. The for loop initializes our iterating variable with a value of 0 to start looping from the first element. Since we want to iterate over the whole array, we need to calculate the length of the array, which is easy to do with the length property. The last element in our array will then be accessible by using array_name[length - 1].

The following code snippet shows us how to loop through an array sequentially using a for loop:

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

2

3

let animal_count = animals.length;

4

5

for(let i = 0; i < animal_count; i++) {

6

  console.log(animals[i]);

7

}

8

/* Outputs:

9

Fox

Dog

Lion

Cat

Zebra

*/

Notice how we are using the less than operator (<) instead of the less than or equal to operator (<=) as our loop ending condition.

Two advantages of using a for loop when looping through arrays are that it is widely supported and it allows you to control the flow of the loop through break and continue statements. You can exit the loop as soon as you find what you're looking for. A for loop also works well when you are dealing with asynchronous code.

The disadvantage is that it is a bit verbose, and you are likely to make off-by-one errors once in a while.

Iterating Using the forEach() Method

You can also use the built-in forEach() method to iterate over arrays in JavaScript. This method accepts a callback function as its parameter, which is executed once for each array element. The callback function can be defined somewhere else, and it can be an inline function or an arrow function.

The callback function can accept three different arguments:

1. the current element itself
2. the index of the current element
3. the array on which we called the forEach() method

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

2

3

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

4

/* Outputs:

5

Fox

6

Dog

7

Lion

8

Cat

9

Zebra

*/

As you can see, using the forEach() method makes our code much more concise. Here is another example that uses the second argument of the callback function.

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

2

3

animals.forEach((animal, idx) => {

4

  console.log(`Animal ${idx + 1}: ${animal}`);

5

});

6

/* Outputs:

7

Animal 1: Fox

8

Animal 2: Dog

9

Animal 3: Lion

Animal 4: Cat

Animal 5: Zebra

*/

Using forEach() works great for simple iteration over arrays. However, you can't use break and continue to exit the loop midway and change the program flow. Another downside of using forEach() is that you won't be able to use asynchronous code with this method.

Iterating Using the for...of Loop

The ES6 standard added a lot of new features to JavaScript. One of them was the concept of iterators and iterables. You can use the for...of loop to iterate over values in any object which implements the @@iterator method. Built-in types such as Array, String, Set, or Map can use a for...of loop to iterate over their values.

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

2

3

for(let animal of animals) {

4

  console.log(animal);

5

}

6

/* Outputs:

7

Fox

8

Dog

9

Lion

Cat

Zebra

*/

Using the for...of construct for iteration has many advantages. For instance, you can use it to iterate over other built-in iterable types as well. Other than that, it allows you to break out of the loop and control the program flow using the break or continue statements.

The only potential downside is slightly less browser support, but it all depends on your target audience.

Iterating Using the for...in Loop

You can also loop through an array using a for...in statement. This will loop over all enumerable string properties of an object. This also includes inherited enumerable properties.

I would like to mention here that iterating over a loop using a for...in statement is not recommended. This is because, as I mentioned earlier, this statement will iterate over all the integer and non-integer properties, even if they are inherited. When we are iterating over arrays, we are usually just interested in integer keys.

The traversal order for the for...in loop is well defined, and it begins with the traversal of non-negative integer keys. The non-negative integer keys are traversed in ascending order by value. Other string keys are then traversed in the order of their creation.

One type of array which you can traverse with a for...in loop better than other methods is a sparse array. For example, a for...of loop will iterate over all the empty slots in the sparse array, while a for...in loop won't.

Here is an example of iterating over a sparse array with a for...in loop:

let words = new Array(10000);

2

3

words[0] = "pie";

4

words[548] = "language";

5

words[3497] = "hungry";

6

7

for(let idx in words) {

8

  if(Object.hasOwn(words, idx)) {

9

    console.log(`Position ${idx}: ${words[idx]}`);

  }

}

/* Outputs:

Position 0: pie

Position 548: language

Position 3497: hungry

*/

You might have noticed that we have used a static method called Object.hasOwn() to check if the specified property for our queried object is indeed its own property.

Final Thoughts

You can always use a regular for loop to iterate over arrays. It allows you to control the program flow with the help of the break and continue keywords, while also supporting asynchronous code. On the other hand, it does require you to be careful about off-by-one errors.

The forEach() method provides a shorter way of looping through an array, but it doesn't work well with asynchronous code. You also can't break out of loops or control program flow using break and continue.

The for...of loop gives us the best of both worlds. We have full control over the program flow, and it also works with asynchronous code. There is also no need to worry about off-by-one errors.

Finally, the for...in loop is not a recommended way of looping through arrays. However, it can prove useful if the arrays you are traversing are very sparse.

The thumbnail for this post was generated with OpenAI's DALL-E 2.