JavaScript Loops Explained: for, while, do-while, for/in, for/of
Get Started
A loop is a programming construct that allow you to execute a block of code multiple times. If you’re in a situation where you need to run the same code over and over again, you should use a looping structure. Loops are particularly useful when working with arrays and objects.
for loop
Let’s take a look at a simple for loop. Let’s say we have this array:
const colors = ['red', 'blue', 'green', 'purple'];
Let’s use a for loop to iterate over and print each color in the colors array. Here’s how it’s done:
const colors = ['red', 'blue', 'green', 'purple'];
for(let i = 0; i < colors.length; i++)
{
console.log(colors[i]);
}
This code will print out:
red
blue
green
purple
Neat! We just used a for loop to loop over and print every element in the colors array. So now let’s take a closer look at the syntax of a for loop:
for(initialization; condition; increment){
body
}
A for loop has 4 parts:
- initialization - This is where you declare the variable that defines the starting point of the loop.
let i = 0 - condition - This is an expression that resolves to a boolean which determines if the loop should continue iterating or if it should stop. If the expression resolves to true then the loop will continue iterating. If the expression returns false the loop will terminate.
i < colors.length - increment/decrement - This is where you increment (or decrement) the variable you declared in the initialization step.
i++ - body - the piece of code that will be executed repeatedly
console.log(colors[i]);
So, if we put that all back together we get:
for(let i = 0; i < colors.length; i++)
{
console.log(colors[i]);
}
The for loop is not the only looping structure. There are several different looping mechanisms in JavaScript:
- for
- for/in
- for/of
- while
- do/while
for/in loop
The for/in loop allow you to iterate over every property in an object. The syntax is as follows:
const obj = {
name: "Patrick",
age: 24,
youtube: "DevSage"
};
for(let key in obj)
{
console.log(key); // print out each PROPERTY in `obj`
}
name
age
youtube
NOTE: for/in iterates over the object’s properties, not it’s values. If you want to print the values in an array you can do the following:
const obj = {
name: "Patrick",
age: 24,
youtube: "DevSage"
};
for(let key in obj)
{
console.log(obj[key]); // print out each VALUE in `obj`
}
Patrick
24
DevSage
for/of loop
The for/of loop is similar to the for/in loop, except the for/of loop allows you to iterate over and access elements in arrays (and also Maps and Sets). The syntax is as follows:
const arr = [1,2,3,4,5];
for(let val of obj)
{
console.log(val); // print out each VALUE in `arr`
}
while loop
The while loop is a looping structure that begins by checking some condition. If the condition is true, the body of the while loop is executed. If the condition is false, the loop body is not executed. After that, the while loop ends.
Here is the syntax for while loop:
while(condition)
{
// do something
}
Let’s write a while loop that prints out numbers from 1-10:
let i = 1;
while(i <= 10) // while i is less than 10...
{
console.log(i); //... print i ...
i++: // ... and then increment i
}
1
2
3
4
5
6
7
8
9
10
do-while loop
The do-while loop is extremely similar to the while loop except the do-while loop guarantees that the code in the loop body is executed at least once. Then, if the condition is true after the first execution, the loop will continue. If the condition is false, the loop will stop. The syntax is as follows:
const myArray = [];
var i = 11;
do {
myArray.push(i); // add i to `myArray`
i++; // increment i
} while(i < 10); // check if i < 10?
console.log(myArray) // [11]
i = 11 and the do-while condition is if(i < 10). In a regular while loop, the body of the loop would never execute because i is greater than 10. But because a do-while loop guarantees that the body of the loop gets executed at least once, 11 gets pushed to myArray and then the loop terminates.