Loops: for, while, do...while, for...of, for...in

Learn different types of loops in JavaScript, like for, for...in, for...of, while, and do...while with examples.

Loading...
Loops: for, while, do...while, for...of, for...in

In programming, loops let you repeat tasks easily. Instead of writing the same code again and again, you can use a loop to do it for you. For example, If you have to print the numbers from 1 to 5, you can do it very easily. But, when printing the numbers from 1 to 1000, writing so much code could be hectic. Loops make this process easier.

JavaScript provides the following types of loops:

  • for loop
  • for...in loop
  • for...of loop
  • while loop
  • do-while loop

Let's understand each one with examples.

for loop

The for loop is ideal when you know the exact number of required iterations. This loop iterates over a sequence of elements.

In for loop, you decide:

  • when it starts,
  • how long it should continue, and
  • how the counter should increase.

Syntax:

for (initialization; condition; increment) {
       //code to be executed
}

A for loop has three parts:

  • Initialization: This is where you create a variable that will track the loop count.
  • Condition: This is checked before every loop run. As long as this is true, the loop continues.
  • Increment: This updates the loop variable after each run.

For example, let’s say you want to print the numbers from 1 to 50.

for (let i = 1; i <= 50; i++) {
    console.log(i);
}

Here,

  • First, let i = 1 sets the starting point.
  • Then, the loop checks, is i <= 50?
  • If yes, it runs console.log(i) and prints the number.
  • Then i++ increases the number by 1.
  • This continues until i becomes 51.
  • Once i > 50, the condition fails, and the loop stops.

Output:

1
2
3
...
50

for...in loop

The for...in loop is useful when you want to go through all the keys (properties) of an object one by one.

Syntax:

for (key in object) {
    // code to run for each key
}
  • key is a variable that takes the name of each property in the object (like "firstName", "lastName", etc.).
  • The loop goes through every key in the object.

For example:

const person = {
  firstName: "Joseph",
  lastName: "Burns",
  age: 25
}
 
for (x in person) {
    console.log(person[x]);
}

Here,

  • On the first loop, x is "firstName", and person[x] is "Joseph".
  • On the second loop, x is "lastName", and person[x] is "Burns".
  • On the third loop, x is "age", and person[x] is 25.

Output:

Joseph
Burns
25

If you also want to print the keys, you can do:

for (let key in person) {
  console.log(key + ": " + person[key]);
}

Output:

firstName: Joseph  
lastName: Burns  
age: 25

for...of loop

The for...of loop is useful when you want to loop through values of an iterable item such as arrays, strings etc.

Unlike for...in, which gives keys in an object, for...of gives you values directly from an array or string.

Syntax:

for (variable of iterable) {
    // code to run for each value
}
  • variable takes each value one by one from the iterable (like items in an array).
  • iterable is something like an array or string that has multiple values you can loop through.

For example:

const person = ["Joseph", "Burns", 25]
 
for (x of person) {
    console.log(x);
}

Here,

  • On the first loop, x is "Joseph"
  • On the second loop, x is "Burns"
  • On the third loop, x is 25

Output:

Joseph
Burns
25

while loop

The while loop is useful when you don’t know how many times you need to repeat something, and it should continue based on a condition.

It checks the condition before each loop. If the condition is true, the loop runs. If it’s false, the loop stops.

Syntax:

while (condition) {
    // code to run as long as condition is true
}
  • condition: This is checked before each loop.
  • If it's true, the code inside the loop runs.
  • After each iteration, it checks the condition again.

For example, let’s say you want to print the numbers from 1 to 50.

let i = 1;
 
while(i <= 50) {
    console.log(i);
     i++;
}

Here,

  • It starts with i = 1.
  • It checks if i <= 50. Since it's true, it prints 1, then adds 1 to i.
  • Now i = 2, it checks again… and this continues.
  • When i becomes 51, the condition is false and the loop stops.

Note:

Make sure the loop variable (like i) is changing inside the loop.

If it doesn’t, the condition might never become false, and the loop will run forever (called an infinite loop).

do-while loop

The do-while loop is similar to the while loop, with the difference that the code block executes at least once before checking the condition.

Syntax:

do {
    // code to be executed
} while (condition);
  • The code inside the do { } block runs once.
  • Then the condition inside while( ) is checked.
  • If the condition is true, the loop repeats.
  • If false, it stops.

For example, let’s say you want to print the numbers from 1 to 50.

let i = 1;
 
do {
    console.log(i);
     i++;
} while(i<=50);

Here,

  • First, it prints 1 (without checking anything yet).
  • Then it checks if i <= 50.
  • If true, it prints the next number and repeats.
  • It keeps going until i > 50.

Difference from while:

let i = 100;
 
while (i < 10) {
  console.log("This won't print!");
}
 
do {
  console.log("This will print once!");
} while (i < 10);

Even though i is 100, and the condition i < 10 is false, the do...while version still prints once before stopping.

This makes do...while useful when you want to run something at least once before deciding to repeat it.

Support my work!