Javascript while loop

Learn what is while loop in javascript and how to use them.

Many time while programming we encounter a situation where we have to repeat a statement or a block of code again and again.

let i = 0;

console.log(`value is ${i++}`);
console.log(`value is ${i++}`);
console.log(`value is ${i++}`);
console.log(`value is ${i++}`);
console.log(`value is ${i++}`);

//value is 0
//value is 1
//value is 2
//value is 3
//value is 4

In order to reduce the number of statements we have to write to repeat it, we can use a loop which will repeat the statement until a given condition is true.

Javascript supports different loops for different uses and here we are going to see the while and the do...while loop.

While loop

The most basic and prominent loop in javascript is while loop, it executes a statement or a code block repeatedly after checking if a given condition is true. Once the condition is false it will break the loop.

Syntax

while(condition){
  code to execute;
}

The following is the flow chart of how while loop works.

let i = 0;

while(i < 5){
 console.log(`value is ${i++}`);
}

//value is 0
//value is 1
//value is 2
//value is 3
//value is 4

We have to provide a logic inside the loop to make sure the the loop terminates at a given condition else it will become a infinite loop.

while(true){
  console.log(`I am infinitely looping`);
}

//'I am infinitely looping'
//'I am infinitely looping'
..
..
..

If you want to break the loop in between at any different condition then you can use break statement to break the loop.

let i = 0;
while(true){
  if(i == 5){
    break;
  }

  console.log(`value is ${i}`);
  i++;
}

//value is 0
//value is 1
//value is 2
//value is 3
//value is 4

If you want to skip executing a particular statement at any given condition then you can do so with continue statement in while loop.

let i = 0;
while(i <= 5){
  if(i%2 === 0){
    i++;
    continue;
  }

  console.log(`value is ${i}`);
  i++;
}

//value is 1
//value is 3
//value is 5

---

Do while loop in javascript

do...while is just like while loop with an exception that the condition is evaluated at the end of the loop.

Syntax

do{
  code to execute;
}while(condition);

This means the code block will executed at least once even if the condition is false.

The following is the flow chart for the do...while loop.

let accepted = false;
do{
  accepted = confirm('Do you wish to proceed');
}while(accepted === false);

The above loop will keep asking for a confirmation until you pass true to it.

---

There is some difference when using while loop and for loop.

In while loop the variable is initialized before the loop so it is accessible outside the loop.

let i = 0;
while(i < 5){
  i++;
}

console.log(i);
//4

In for loop if you are declaring variable with let then it is not accessible outside the scope.

for(let i = 0; i < 5; i++){
  //
}

console.log(i);
//Uncaught ReferenceError: i is not defined

It is up to you to decide when you want to use which loop.