Lesson Overview

Onward to mastering JavaScript's while loops! while loops are a vital tool in programming, enabling the repeated execution of code while a specified condition remains true. Much like continuously cleaning a room until it's no longer messy, while loops run as long as the condition is true.

What are While Loops?

while loops in JavaScript repeat an action "while" a condition remains true. For instance, you might play outside while it's sunny outside. A simple example of a while loop in JavaScript is:

let counter = 0; // Initialize with 0
while (counter < 5) { // Loop while counter is less than 5
    console.log(counter); // Print the counter
    counter++; // Increment the counter by 1 after each loop iteration
}
/*
Prints:
0
1
2
3
4
*/

Here, we initialize a counter with a value of 0, and log the current counter value while its value is less than 5. When the value becomes >= 5, the loop execution finishes.

The Syntax of While Loops

A while loop consists of two core parts: a condition and a body. While the condition is true, the code block (body) under the while statement executes.

while (condition) { // Loop continues while the condition is true
    // block of code
}
Practical Experiences with While Loops

Imagine a routine task, like a countdown from 5 to 1. A while loop can conveniently handle this, as follows:

let number = 5; // Initialize with 5

while (number >= 1) { // While number is at least 1
    console.log('Number is:', number); // Print the number
    number--; // Decrease the number by one after each iteration
}
/*
Prints:
5
4
3
2
1
*/
Compound Conditions with While Loops

while loops in JavaScript can use compound conditions with the use of && (and) or || (or). Consider this code, where you're saving money for a bicycle and will stop if you reach the target or once winter begins:

let savings = 0; // Starts with 0 savings
let isWinter = false; // Starts when it's not winter

while (savings < 100 && !isWinter) { // As long as savings is less than 100 and it's not winter
    savings += 10; // Save 10 more
    console.log('Savings:', savings);

    // Simulate the changing of seasons
    if (savings === 50) { // When savings is 50, winter begins
        isWinter = true;
    }
}
/*
Prints:
Savings: 10
Savings: 20
Savings: 30
Savings: 40
Savings: 50
*/
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal