Loops in JavaScript

You will often need to run same code several times. For example, you need to print "This is code" 10 times. It is not advisable to write console.log("This is code"); 10 times.
At that time, loops come into the picture. There are two types of loops:

  • while
  • for
We will see them one by one.

while loop

while loop has following syntax.


while(condition){
    //loop body
}
                    

As you can see from above syntax, as long as condition is true, the loop body will be executed. Let us see an example to know more.


let counter = 0;
while(counter < 3){
    console.log(`This is ${counter} time`);
    counter++;
}
//output: This is 0 time
//        This is 1 time
//        This is 2 time
                    

In above code, When script starts, counter is 0.

  • Condition counter < 3 is true since counter is 0. So loop body is executed and counter is increased to 1. And execution jumps to loop condition.
  • Now again condition counter < 3 is checked which is true since counter is 1. So loop body is executed and counter is increased by 1 and now value is 2. And execution jumps to loop condition.
  • Now again condition counter < 3 is checked which is true since counter is 2. So loop body is executed and counter is increased by 1 and now value is 3. And execution jumps to loop condition.
  • Now this time when condition counter < 3 is checked, it is false because counter is 3. Now that condition is false, so loop body will not executed.
So from above example, you should have understand following points:
  • If condition is false loop body will not execute.
  • If condition is true loop body will executed. (Shouldn't have written this :P)
  • Every time after the execution of a loop body, the condition will be checked.

do...while loop

do...while loop has the following syntax.


do{
    //loop body
} while(condition)
                    

As you can see from above syntax, loop body gets executed and then condition is checked. If the condition is true then, again loop body will be executed.
So do...while loop always executes loop body one time, no mattter condition is true or false.


let counter = 3;
do{
    console.log(`This is ${counter} time`);
    counter--;
}while(counter > 0);
//output: This is 3 time
//        This is 2 time
//        This is 1 time
                    

At first, counter is 3.

  • First of all, loop body is executed. This makes counter value 2. So condition counter > 0 is true.
  • Since the condition is true, loop body is executed which makes coutner value 1. So condition counter > 0 is true.
  • condition is true, loop body is executed which makes counter value 0. So condition counter > 0 is false. So loop ends there.

for loop

for loop has the following syntax.


for(initialize; condition; step){
    //loop body
}
                    

There are three parts in the for loop.

  • initialize: In this part, generally you will be initializing the variable which is going to be used in loop. In while loop, we had initialized let counter = 0;. That can be done for(let counter=0; condition; step) like this.
    Initialization is optional. You can skip it or you can add multiple variables in it. i.e for(;condition;step) or for(let counter = 0, counter1 = 2; condition; step).
  • condition: You are already familiar with condition part. If condition is true, then loop body will be executed. It is not compalsury to use same variable in condition which is used in initialization.
  • step: This means the increment or decrement of the variable. It is not necessary to use the variable which are used in initialization or condition. You should alwasy thought about the exit condition and check when the loop will end.
We will see every case with for loop.


for(let counter=0; counter < 3; counter++){
    console.log(`This is ${counter} time`);
}
//output: This is 0 time
          This is 1 time
          This is 2 time
                    

  • for loop starts with initialize part which is let counter=0 and then counter < 3 is checked which is true. Then loop body is executed.
  • After that increment part counter++ is executed which makes counter value 1. After that condition counter < 3 is checked which is true. So loop body is executed.
  • Again, increment part counter++ is executed which makes counter value 2 and condition counter < 3 is checked which is true. So loop body is executed.
  • After that increment part counter++ is executed which makes counter value 3. Now condition counter < 3 is checked and it is false. So loop body is not executed.
Now we will have a look at different cases of for loop.


let counter = 3;
//loop without initialize part
for( ; counter>0 ; counter--){
    console.log(`counter is ${counter}`)
}
//output: counter is 3
//        counter is 2
//        counter is 1

//loop with multiple initialization
for(let counter1=0, counter2 = 4; counter1 < 3 && counter2 < 8; counter1++, counter2 += 2){
    console.log(`counter1 is ${counter1}`);
    console.log(`counter2 is ${counter2}`);
}
//output: counter1 is 0
//        counter2 is 4
//        counter1 is 1
//        counter2 is 6
                    

As you can see from the above code, there are many ways to use for loop. It is very unlikely that you are going to use the above kind of code. But you should know that this kind of thing can happen using for loop.
In second for loop, the increment part is little bit tricky as counter2 is incremented by 2. So you should know that in increment part, it is not necessary to increment by 1.
You can also need to see, why the output of the second for loop is like that and how the condition part of the loop works.

Conclusion

In this section, you learned about loops:

  • while
  • for
Both loops are widely used in programming and you need to practice it with different types of condition to master it. We have tried to cover maximum cases, but it is up to you to master the loops.
In next section, you will learn about functions in JavaScript.