How to Loop Through an Array in JavaScript

There are several ways to loop through arrays in JavaScript, each with its pros and cons. Whether you need to modify the original array, return a new array, or perform some action on each element of the array, there’s a loop method that can help.

In this blog post, we’ll explore the different loop methods available in JavaScript, including the for loop, the for...of loop, the forEach method, the while loop, and the map method.

We’ll compare these loop methods based on a few factors so that — by the time you’re done reading — you’ll understand each of these methods, and you’ll be able to choose the best one for your program’s needs.

With a For Loop

// Create array
myArray = ["apples", "bananas", "oranges"];

// Iterate over array with a for loop
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

This is the traditional method of looping through an array in JavaScript. It uses a counter variable i that’s incremented on each iteration of the loop. The loop continues until i is no longer less than the length of the array.

With a For… Of Loop

// Create array
myArray = ["apples", "bananas", "oranges"];

// Iterate over array with a for... of loop
for (const element of myArray) {
  console.log(element);
}

For... of loops are a more recent addition to JavaScript. They were introduced in ECMAScript 2015 (ECMAScript 6), the second major update to JavaScript, and they’re used to loop through the elements of an array. For... of loops providesa more concise syntax compared to the for loop and automatically stop when all the elements in the array have been processed.

With the forEach Method

// Create array
myArray = ["apples", "bananas", "oranges"];

// Iterate over array with the forEach method
myArray.forEach(element => console.log(element));

The forEach method is a built-in method of arrays in JavaScript that allows you to loop through each element of the array and perform an action on each element. It’s similar to the for...of loop, but provides a different syntax.

With a While Loop

// Create array
myArray = ["apples", "bananas", "oranges"];

// Iterate over array with a while loop
let i = 0;
while (i < myArray.length) {
  console.log(myArray[i]);
  i++;
}

The while loop is a general-purpose loop that can be used to loop through an array in JavaScript. It uses a counter variable i, which is incremented on each iteration of the loop. The loop continues as long as i is less than the length of the array.

With the Map Method

// Create array
myArray = ["apples", "bananas", "oranges"];

// Iterate over array with the map method
myArray.map(element => console.log(element));

The map method is another built-in method of arrays in JavaScript, which allows you to loop through each element of the array, do an action on each element, and return a new array with the results.

How to Choose

Which loop method to use depends on your program’s requirements and your personal (or your team’s, or your organization’s) coding style. Here are some factors to consider when choosing a loop method:

Do you need to modify the original array?

If you need to modify the original array, use a for loop or a while loop. If you just need to perform some action on each element of the array and don’t need to modify the original array, use forEach or for...of.

Do you need to return a new value or just perform an action?

If you need to return a new array that is the result of a specific operation on each element of the original array, use the map method. If you just need to perform some action on each element of the array and don’t need a return value, use forEach or for...of.

How much of a concern is performance?

In terms of performance, the for loop is generally faster than the forEach method and for...of loop, but the difference is small and may not be noticeable. The map method is generally slower than the other loop methods because it creates a new array, but it can be more convenient if you need to return a new array.

How readable should your code be?

If code readability is a concern, for...of and forEach can be easier to read than for and while loops, especially for simple operations. The map method is generally easier to read than the other loop methods when you need to return a new array.