JavaScript While Loop

In this tutorial, you will learn about the while loop, how to use it in JavaScript with the flow diagram and examples.

While loop

While loop is a control flow statement that is used to execute a block of code over and over again until the condition given is true.

Condition is evaluated before execution enters the loop body. If the condition is true, the loop body is executed. If the condition is false, the loop body is skipped and the loop continues.

while loop is also known as pre-test loop because it executes statement before execution of body.

var i = 0;
while (i < 5) {
  console.log("Hello World!");
  i++;
}

While loop syntax

The syntax of the while loop is as follows:

while (condition) {
  // body of the loop
}

1. The while keyword is followed by a condition.
2. The condition is enclosed in parenthesis.
3. A condition can be anything boolean, number, expression, etc, but must be evaluated to true or false.
4. The body is enclosed in curly braces.

Flow diagram

The flow diagram below shows the execution of the while loop.

while loop javascript example

Here are some examples of while loop in JavaScript.

Example 1:

var count = 0;
while (count < 5) { // Condition
  console.log(count);
  count++; // updating variable i
}

Code Explanation:

• First, the variable count is initialized to 0
• Then, before entering the loop condition is checked
• If the condition is true, the loop body is executed
• After executing the loop body, the variable count is incremented by 1
• The loop condition is checked again and the loop body is executed again and again until the condition is false

Example 2:

var count = 5;
while (count) { // Condition
  console.log(count);
  count--; // updating variable i
}

In the above example condition given is just count, which is valid because it is a number and the boolean value of all positive and negative numbers is true.

Loop breaks when count == 0 because boolean value of 0 is false.

When to use while loop

While loop is best suited to be used when you do not know the number of iterations need to reach the result and the only condition is known.

For example, print pages until the paper in the machine are finished. In this case, you don't know how many pages are printed and you only know to keep printing until the paper is finished.

Code for this will look like this:

while (paperIsFinished) {
  printPage();
}

Let's see few examples:

Example 1: Add numbers of array from start until sum >= 100

var arr = [12, 5, 2, 35, 18, 32, 1, 5, 2];
var sum = 0;
var i = 0;
while (sum <= 100) {
  sum += arr[i];
  i++;
}
console.log(i, sum);

Nested while loop

You can also use while loop inside another while loop, this is called nested while loop.

var i = 0;
while (i < 10) {
  while (i < 5) {
    i++;
  }
  i++;
  console.log(i);
}

Using Variable in while loop

In while loop, the variable can be used to store the value of a condition.

The count variable in the above example can be used in the loop body to get desired output like executing equations.

Let's see an example to find the sum of even numbers from 1 to 100.

var count = 100, sum = 0;
while (count) { // Condition
  sum = sum + count;
  count = count - 2; // updating variable
}
console.log(sum);

Do while loop

The do-while loop is similar to the while loop, but in the do-while loop, the condition is checked before the body is executed.

It is used only you have a condition to satisfy and you want to execute the loop body atleast once.

The syntax of do-while loop is as follows:

do {
  // body of loop
} while (condition);

The do keyword is followed by a body enclosed in curly braces and a condition is enclosed in parenthesis.

The following example shows the execution of the do-while loop.

var count = 0;
do {
  console.log(count);
  count++;
} while (count < 5);

Difference between for and while loop in javascript

There are the following differences between for and while loop in javascript: