JavaScript While Loop: Syntax, Usage, and Examples

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 to Use the While Loop in JavaScript

The syntax for using a while loop in JavaScript is straightforward. Here's the basic structure:

while (condition) {
    // Execute these statements as long as the condition is true
    statements;
}

• while: The keyword to initiate the while loop.
• condition: A boolean expression that the while loop evaluates to true or false before each iteration. If the expression evaluates to true, the loop's body executes. As soon as the expression evaluates to false, the loop terminates.
• statements: JavaScript statements to execute as long as the condition evaluates to true.

JavaScript while loops can dynamically update HTML content.

let i = 0;
while (i < 5) {
    document.body.innerHTML += `<p>Item ${i}</p>`;  // Modifies HTML
    i++;
}

They can also be used to dynamically modify CSS styles on a webpage.

let boxes = document.querySelectorAll(".box");
let i = 0;
while (i < boxes.length) {
    boxes[i].style.backgroundColor = "lightblue";  // Applies CSS styling dynamically
    i++;
}

When to Use the While Loop in JavaScript

While loops are ideal when the end condition is unknown in advance.

Continuous Execution

JavaScript while loops are ideal for tasks that require continuous checking and execution until a particular condition changes.

let response;
while (!response) {
    response = prompt("Please enter your name:");
}
console.log("Hello, " + response + "!");

Processing Items

While loops are also useful for processing items in an array when the processing might affect the length of the array.

let numbers = [1, 2, 3, 4, 5, 6];
while (numbers.length > 0) {
    let item = numbers.pop(); // Removes the last element
    console.log('Processing:', item);
}

While loops are commonly used with data structures like stacks and queues.

let stack = [10, 20, 30];
while (stack.length > 0) {
    console.log("Popped:", stack.pop());  // Works with stack data structures
}

Examples of While Loops in JavaScript

User Input Validation

While loops can ensure that user input meets certain criteria before proceeding.

let age;
while (!age || age < 18) {
    age = prompt("Please enter your age (you must be 18 or older to proceed):");
}
console.log("Access granted.");

Using const ensures values that should remain unchanged cannot be reassigned.

const minAge = 18;
let age;
while (!age || age < minAge) {
    age = prompt("Please enter your age (you must be 18 or older to proceed):");
}
console.log("Access granted.");

Data Streaming

While loops can enable data streaming, where data often comes in chunks and processing continues until the stream ends.

let dataAvailable = true;
while (dataAvailable) {
    let data = stream.getNextChunk();
    if (data) {
        processData(data);
    } else {
        dataAvailable = false;
    }
}

You can also use while loops process JSON data streams.

let jsonData = '[{"name": "Alice"}, {"name": "Bob"}]';
let parsedData = JSON.parse(jsonData);
while (parsedData.length > 0) {
    console.log(parsedData.pop().name);  // Outputs: "Bob", "Alice"
}

Runtime Control

In game development, for example, while loops can keep a game running until a player decides to quit or achieves a certain goal.

let inGame = true;
while (inGame) {
	// Game logic
	
	if (playerWantsToQuit()) {
		inGame = false;
	}
}

Learn More About the While Loop in JavaScript

Do While Loop in JavaScript

A variation of the while loop is the do-while loop. Do-while loops guarantee that the loop's body executes at least once before testing the condition for the first time.

let result;
do {
    result = performAction();
} while (result !== 'success');

The while statement is useful for scenarios requiring unknown iteration counts.

Infinite Loops

In an infinite loop, the condition of the while loop is always true and never becomes false. Infinite loops can cause an application to crash or stop responding.

// Don't try this at home
let count = 0;
while (count < 5) {
    console.log(count);
}

Iterating Over an Array Element Dynamically

While loops can process each array element dynamically, especially when modifying the array during iteration.

let numbers = [2, 4, 6, 8, 10];
while (numbers.length > 0) {
    let item = numbers.shift(); // Removes the first array element
    console.log("Processing:", item);
}

• The array element is removed in each iteration, preventing an infinite loop.
• Unlike a for loop, this approach adjusts to changing array lengths dynamically.

Iterating Over JavaScript Objects

While loops can iterate over JavaScript objects dynamically when working with object properties.

let user = { name: "Alice", age: 25, role: "Developer" };
let keys = Object.keys(user);
let i = 0;

while (i < keys.length) {
    let key = keys[i];
    console.log(`${key}: ${user[key]}`);
    i++;
}

Handling Asynchronous Data with APIs

When working with APIs, while loops can repeatedly fetch and process data until a stopping condition is met. Since API calls are often asynchronous, while loops should be combined with async functions to prevent blocking operations.

async function fetchData() {
    let page = 1;
    let moreData = true;

    while (moreData) {
        let response = await fetch(`https://api.example.com/data?page=${page}`);
        let data = await response.json();

        if (data.length === 0) {
            moreData = false; // Stop when no more data is available
        } else {
            processData(data);
            page++; // Move to the next page
        }
    }
}

• The async function allows the API call to be handled without freezing the main thread.
• A while statement ensures repeated execution until there’s no more data to fetch.
• The break statement could also be used inside the loop to exit early under certain conditions.

Combining Loops with Other Control Structures

You can combine while loops with other control structures like if statements to handle complex logic within a loop.

let number = 0;
while (number < 20) {
    if (number % 2 === 0) {
        console.log(number + " is even");
    } else {
        console.log(number + " is odd");
    }
    number++;
}

For vs While loop

JavaScript for loops are often a better choice when you know the exact number of iterations in advance, whereas a while loop is better suited for unknown iteration counts.

for (let i = 0; i < 5; i++) {
    console.log(i);  // Outputs: 0, 1, 2, 3, 4
}

Comparison with other methods

In Java, while loops follow a similar syntax.

int number = 0;
while (number < 5) {
    System.out.println(number);
    number++;
}

The Python while loop also operates similarly to JavaScript's.

count = 0
while count < 5:
    print(count)
    count += 1

If you're new to while loops, consider following our beginner-friendly JavaScript tutorial course to get hands-on experience with while loops in real-world scenarios.