while loop in JavaScript with examples

Are you tired of writing code that executes repeatedly until a certain condition is met? Look no further because the JavaScript "while" loop is here to save the day! The while loop is a must-know tool for any aspiring JavaScript developer due to its simple syntax and powerful functionality.

The while loop in JavaScript is used to continue executing some blocks of code until the given condition evaluates to be false.

JavaScript while loop syntax

The syntax of the while loop in JavaScript is:

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

Whatever block of code is written as the body of the loop, it will continue its execution again and again until the specified "condition" evaluates to false.

Note: Do not forget to update the loop variable. Otherwise, the loop may go for infinite execution.

JavaScript while loop example

Consider the following code as an example demonstrating the use of the "while" loop in the JavaScript language:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      let num = 5, i = 1;
      while(i<=10)
      {
         console.log(num*i);
         i++;
      }
   </script>
   
</body>
</html>

The snapshot given below shows the sample output produced by the above JavaScript example:

The dry run of the following JavaScript code from the above example is:

let num = 5, i = 1;
while(i<=10)
{
   console.log(num*i);
   i++;
}

goes like this:

Using the first statement, the value 5 will be initialized to num, and 1 will be initialized to i.
Therefore num=5 and i=1.
Now the condition of the while loop will be executed. That is, i<=10 or 1<=10 evaluates to true. Therefore, program flow goes inside the loop.
And the value of num*i, that is, 5*1 or 5 will be printed on the console using the console.log() statement.
Now the value of i will be incremented by 1 using the last statement. So i=2 now.
Continue the same process from step no. 3 to step no. 5. This process continues until the condition of the while loop evaluates to false.

Before closing the discussion on the "while" loop, I'm willing to include one more example similar to the previous one, but I'm going to use proper comments to explain the code.

JavaScript Code

// Set a starting value for the counter variable
let counter = 1;

// While the counter is less than or equal to 5
while (counter <= 5) {
  // Print the value of the counter
  console.log(counter);
  // Increment the counter by 1
  counter++;
}

Output

Advantages of the "while" loop in JavaScript

The while loop can be used to repeatedly run a block of code as long as a specific condition is met in a variety of contexts. Because of this, it can be used for a variety of programming tasks.
Even novice programmers can easily understand the while loop's usage.
Because the while loop only checks the condition once per iteration, it may occasionally be more effective than other loop types (such as for loops).

Disadvantages of the "while" loop in JavaScript

If you forget to properly update the loop condition in a while loop, you may unintentionally create an infinite loop. Your program may hang or crash as a result of this.
If the condition is complicated or if there are several conditions to check, while loops may result in overly complicated code.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this article? Share it!

Like/follow us on social media for updates!