Tutorials Tonight
Follow Us

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.

Example

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 flow diagram

while loop javascript example

Here are some examples of while loop in JavaScript.

Example 1:

Example

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

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:

Example

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

Example

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.

Example

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.

Example

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

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.

Example

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

Difference between for and while loop in javascript

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

For loop While loop
For loop runs on number of iterations given While loop runs until the condition is false
In for loop variable is incremented after the loop body is executed In while loop variable can be updated anywhere at the start, middle, or end body execution
A simple for loop can't be used when you don't know the number of iteration (but can be used by using break and if-else statement) while loop can be used when you don't know the number of iteration and just know the condition to stop the loop

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.