How to Loop Over an Array in JavaScript

Introduction
In computer programming, looping is the act of repeatedly calling a piece of code until a certain condition is reached. Each time the code is called, it's called an iteration and almost every programming language accommodates different types of loops by default.
In this article, we'll focus on the specific use-case of how to loop over an array of values in the JavaScript coding language.
We'll show you four different ways to do that in your JavaScript code:
  1. The for loop
  2. The while loop
  3. The do...while statement
  4. The forEach() function
In the sections below, we'll go over each of those four methods and provide you with some coding examples as well.
Let's get started!
Table of Contents
For
The for loop repeats until a specified condition comes out as false. In JavaScript, this is the most commonly used way to create a loop.
Here's a code example for what it looks like in code:
JavaScript
 
const array = [0, 1, 2, 3, 4, 5]
 
for (let i=0; i < array.length; i++) {
  console.log(array[i])
}
Here is a broad overview of how the loop algorithm works:
Loop Begins
→ (if condition → execute code in body and increment step count)
→ (if condition → execute code in body and increment step count)
→ (if condition → execute code in body and increment step count)
→ (if condition → execute code in body and increment step count)
→ ...
First, the initial expression (let i=0;) is executed and declares a variable that is used to represent how many loops have already been executed by the loop.
Then, the condition portion is executed (i < array.length;). If that condition is true, the loop statement executes and calls the code inside the for loop. In this case, the for loop continues executing until the length of the array is no longer greater than the i counter value.
The i++ statement executes at the end of each individual loop and increments the i variable value by 1.
Inside the loop and for each iteration, we console.log() the array item at the index of the current counter value. In actual application or website code, this is where you'd add your code to execute your designated task.
By building our for loop in this way, we can iterate over each item in the array and call code for each one.
This method is widely supported by all browsers.
In the next section, we'll go over the second method: the while loop.
While
The while loop is very similar to the past method. It executes the code inside its statement as long as a specified condition remains true.
If the condition becomes false, the code within the statement stops executing.
In the code below, we'll use the while loop to iterate over each item in the array, much like we did in the previous example.
Here's the code:
JavaScript
 
const array = [0, 1, 2, 3, 4, 5]
 
let i = 0
 
while (i < array.length) {
  console.log(array[i])
  i++
}
For this while loop, we allow it to run until the i variable value is no longer less than the length of the array.
While that statement is true, we call the console.log() code inside the statement. And we also increment the i value by 1.
If the i++ increment code was not included inside the loop statement, it would continue forever because our statement would remain true forever.
As a result, this while loop allows us to iterate over each item in the array.
This method is widely supported by all browsers.
The third method we'll cover in the next section will be the do...while statement.
Do...While
The do...while statement works in almost an identical way to the while loop, but is structured differently in terms of syntax.
Much like its counterpart, the do..while loop statement continues to execute until a given condition has a value of false.
When the condition becomes false, the code stops executing.
Here's what the code looks like:
JavaScript
 
const array = [0, 1, 2, 3, 4, 5]
 
let i = 0
 
do {
  console.log(array[i])
  i++
} while (i < array.length)
The loop will execute the code in the body first and then check the condition. It will continue that process until the bottom condition is false.
Similar to the previous methods, an i counter variable is used to measure how many loops have already occurred. And it stops the loop when each item in the array has been iterated over.
As you can see, the result is the same as the past two methods and which method you use will be a matter of preference in most cases.
The do...while statement works in almost an identical way to the while loop, but is structured differently in terms of syntax.
This method is widely supported by almost all browsers.
ForEach
The forEach method executes a provided callback function once for each item found in a given array.
By default, it doesn't change the array of which it was called on unless the callback function provided is instructed to do so.
Here's what the code looks like:
JavaScript
 
const array = [0, 1, 2, 3, 4, 5]
 
array.forEach(function(item) {
  console.log(item)
})
You can pass three different arguments to the forEach function in this order:
  1. the current item being processed from the source array
  2. the index of the current item being processed from the source array (optional)
  3. the array forEach was called on (optional)
Notice that only the first argument is required and will allow us to loop over each item in the array by returning the said value each time the forEach callback function is called.
And the result is the same as the other methods in this article. Each item in our given array is looped over and logged.
One thing worth noting is that you can't break a forEach function once it begins unless you throw an exception.
This method is widely supported by almost all browsers.
Conclusion
You should now have a better feel for how to loop over an array of values with JavaScript!
In this article, we showed you four different ways to do that:
  1. The for loop
  2. The while loop
  3. The do...while statement
  4. The forEach() function
Thanks for reading and happy coding!