What is while loop in JS?

In JavaScript, a while loop is a fundamental way to repeatedly execute a block of code as long as a specific condition remains true.

According to the provided reference: The JavaScript while loop is a control flow statement that runs a block of code for as long as a specified condition is true. The while loop will execute the code in the body of the loop until the specified condition becomes false.

How the While Loop Works

The mechanism of the while loop is straightforward:

The loop first evaluates a condition provided within the parentheses ().
If the condition is true, the code block inside the curly braces {} is executed.
After the code block finishes executing, the condition is checked again.
This process repeats: check condition, if true, execute block, repeat.
The loop terminates when the condition evaluates to false.

Key Point: The condition is checked before each iteration begins. If the condition is initially false, the code block inside the loop will never run.

Basic Syntax

The general syntax for a while loop in JavaScript is:

while (condition) {
  // code to be executed as long as condition is true
  // Make sure something inside the loop changes the condition
  // eventually to false to avoid an infinite loop!
}

condition: An expression that evaluates to a boolean value (true or false).
{ ... }: The block of code that runs repeatedly.

Practical Example

Let's look at a simple example that counts from 0 up to 4 using a while loop:

let count = 0; // Initialize a variable

while (count < 5) { // Condition: loop while count is less than 5
  console.log("Current count:", count); // Execute code block
  count = count + 1; // Increment count (this changes the condition!)
}

console.log("Loop finished."); // Code after the loop

Explanation:

let count = 0;: We start with count being 0.
while (count < 5): The condition count < 5 is checked.
- Initially, 0 < 5 is true, so the loop body runs.
- console.log(...) prints the current count.
- count = count + 1; increments count to 1.
The condition count < 5 is checked again (1 < 5 is true). The process repeats.
This continues until count becomes 5.
When count is 5, the condition count < 5 becomes false.
The loop terminates, and console.log("Loop finished."); is executed.

Output of the example:

Current count: 0
Current count: 1
Current count: 2
Current count: 3
Current count: 4
Loop finished.

Important Consideration: Avoiding Infinite Loops

A critical aspect of using while loops is ensuring that the condition will eventually become false. If the condition never changes or always remains true, the loop will run indefinitely, causing your program to freeze or crash. This is known as an infinite loop.

Example of an infinite loop (avoid this!):

let endless = 1;

// DANGEROUS! The condition 'endless > 0' will always be true.
while (endless > 0) {
  console.log("This will print forever!");
  // There is no code here to change 'endless'
}

Always include code within the loop body that modifies the variables or state involved in the loop's condition.

When to Use While Loops

While loops are useful when you:

Need to repeat an action an unknown number of times, based purely on whether a condition holds true.
Want to check the condition before the loop's body executes even once.

For situations where you know exactly how many times you need to loop, or when iterating over arrays, for loops or for...of loops are often more appropriate.

askvity