JavaScript While Loop

Using While Loop to Traverse an Array

The while loop is commonly used to traverse arrays when you want to iterate through all elements without using a for loop. Here’s an example:

let numbers = [10, 20, 30, 40, 50];
let i = 0;

while (i < numbers.length) {
    console.log(numbers[i]);
    i++;
}

You can also try this code with Online Javascript Compiler

Run Code

Output:

10
20
30
40
50

Explanation:

1. Initialization: We declare a variable i and set it to 0.
    
2. Condition: The loop checks if i is less than the length of the array.
    
3. Execution: It prints the current element and increments i by 1.
    
4. Termination: When i equals numbers.length, the condition becomes false, and the loop stops.

Do-While Loop

The do-while loop is a variation of the while loop. It ensures the code inside the loop runs at least once, even if the condition is initially false.

Syntax

The syntax for the do-while loop is as follows:

do {
    // Code to execute
} while (condition);

Explanation:

1. The code block runs once before the condition is checked.
    
2. If the condition is true, it repeats the code block. Otherwise, the loop exits.

Example: Using Do-While Loop

Here’s an example of the do-while loop:

let count = 1;

do {
    console.log("Number: " + count);
    count++;
} while (count <= 5);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Number: 1
Number: 2
Number: 3
Number: 4
Number: 5

Explanation:

1. The code block prints the current value of count and increments it.
    
2. The condition checks if count is less than or equal to 5.
    
3. Even if the initial value of count was greater than 5, the loop would run once because the condition is checked after execution.

Comparison Between While and Do-While Loop

Both while and do-while loops have their advantages depending on the scenario. Here's a comparison:

Example: While vs Do-While

Using a while loop:

let x = 5;

while (x > 10) {
    console.log("This will not run because x is less than 10.");
}

You can also try this code with Online Javascript Compiler

Run Code

Using a do-while loop:

let x = 5;

do {
    console.log("This will run at least once, even though x is less than 10.");
} while (x > 10);

You can also try this code with Online Javascript Compiler

Run Code

Output:

• The while loop produces no output because the condition is false at the start.
   
• The do-while loop prints the message once.

Browser Compatibility

Both while and do-while loops are supported across all modern and older browsers, making them reliable for client-side scripting. Here’s a quick compatibility chart:

Frequently Asked Questions

When should I use a while loop instead of a for loop?

Use a while loop when the number of iterations isn’t known beforehand and depends on a condition being true.

What is the main difference between the while and do-while loops?

The while loop checks the condition before executing the code, whereas the do-while loop checks the condition after executing the code once.

Can I break out of a while or do-while loop?

Yes, you can use the break statement to exit a while or do-while loop prematurely.

Conclusion

The while and do-while loops are essential tools in JavaScript for executing code repeatedly based on a condition. The while loop checks the condition first, making it suitable for pre-condition checks. The do-while loop guarantees at least one execution, making it ideal for scenarios where the code needs to run before the condition is checked. By understanding their differences and use cases, you can choose the right loop for your needs and write efficient JavaScript code.