JavaScript While Loops with an Example

In this article, we will see what while loops are in JavaScript. Loops are the building block of any programming language not only specific to JavaScript. Without loops programming is incomplete and working with them and using them properly is what we do daily. Let’s deep dive into JavaScript while loops with examples.

Introduction

While loop is a looping statement in JavaScript, which we use to perform repetitive tasks without writing the same code over and over again. A programming language is incomplete without looping statements because it will be against the principle of DRY(Don’t Repeat Yourself). While loop is one of the loop statements which is present in JavaScript, There are various other types of loops and looping methods present in JavaScript which were introduced after the ES6 update. But while loops are older, and they are present in JavaScript from the start. There are two types of while loops in JavaScript, the first is a while loop and the other is a Do While loop. Let’s see them in practice.

While loops in JavaScript

A while loop is a looping statement in JavaScript, It’s a basic fundamental concept of any programming language. Which is used for reducing the number of repetitive tasks, There are two types of while loops present in JavaScript the first is a while loop and the other is the do-while loop. Let’s see them in practice.

What it does is it takes a condition and if that condition turns out to be true, then the block of the while loop will execute and if not then it will not execute the while loop.

While loop

The while loop only executes when the condition inside the while loop block turns out to be true. And if the condition inside the while loop turns out to be false the loop will not execute. Below is the flowchart of how the while loop works.

Do while loop

The do-while loop executes at least once, even if the condition inside the do block turns to be true or false. It will execute the block of code inside the do-while loop. As shown in the flowchart below.

Syntax for the while loop do-while loop

Compare to most programming languages writing loops statement in JavaScript is pretty easy. Let’s see how we write the while loop and the do-while loop in JavaScript.

While loop syntax

The Syntax for writing the while loop is shown below.

//Syntax for while loop
let counter = 0; // the counter variable.
while (counter < 10)
 {
  console.log(`current count ${counter}`);
  counter++;
}
Code language: JavaScript (javascript)

In the above example, on the first line, I created the counter variable and assign the value of 0 to it.

On the next line, the while loop comes into play and as the condition is specified in the while loop, the block of the while loop will execute until the counter variable became 10, it will stop the loop as soon as the counter variable becomes 10.

Do while loop syntax

The syntax for writing the do-while loop is shown below.

// Syntax for DO While Loop
let num = 10;
do {
  console.log(num);
} while (num < 9);
Code language: JavaScript (javascript)

This is how we can write the do-while loop in JavaScript.

What I did in the above example is I created the num variable and assign the value of 10 to it.

Then write the do-while loop on the next line, inside the do block I log the num variable. And as you can see the condition which I wrote inside the while block will turn out to be false, and still, the result will be a num variable logged on to the console.

Comparison between a While loop and a Do-while loop

Let’s see the difference between the while loop and the do-while loop.

Example of continuous while loop

A continuous while loop occurs when the condition is true in the while loop, without any other condition, which means that the loop will execute until we manually stop the loop. A good example will be a boolean value as shown in the example below.

let counter = true; // Boolean true
while (counter) {
  console.log("hello");
}
Code language: JavaScript (javascript)

The above example will log “hello” continuously to the console because the counter variable is true and the condition that we are specifying in the while loop is true, so the loop is executing continuously.

Conclusion

That’s it for this article, I hope you found this article helpful. JavaScript loops are a very essential fundamental concept that every coder should know, without loops any programming language is incomplete. If you found this article helpful, you can visit codedamn, for interactive coding tutorials, practice projects, and many more. Learn and grow in a community of over 1000+ developers.

FAQs

What is a while loop in JavaScript?

A while loop is a looping statement in JavaScript, which is used for reducing the number of repetitive lines of code.

How does a while loop work in JavaScript?

The while loop begins by examining condition. If the condition is true, the code in the code block is run. If the condition evaluates to false, the code in the code block is skipped and the loop is terminated.

How to implement a while loop in JavaScript?

To implement a while loop in JavaScript, we first need a condition to implement a loop in JavaScript. As shown in the example below.

let i = 0; // initial value.

 while (counter < 10) {
   console.log(`current count ${counter}`);
   counter++;
 }
Code language: JavaScript (javascript)

In the above example, I initialized the i variable with 0 as the value and on the next line, I implemented a while loop and specify a condition in that loop. It will log the current count 0, 1, 2, etc. Until the counter variable becomes 10.

When should you use a while loop in JavaScript?

You should use a while loop in JavaScript when you have to repeat a line of code over and over again. For example, if you want to send greetings to every user from a customer array you can use the while loop to loop over that array and just write a greeting, then the loop will execute until there is no user left in that customer array.

Where can I find the JavaScript source code for the while loop?

The best place to find the JavaScript source code for the while loop will be the MDN docs.