While Loops in JavaScript

While loops are another way in which to repeat sections of code based on the state of a condition. Similarly to if statements, while statements test a boolean condition and if the condition is successful, if its true, then the code will be executed. If the condition fails, and results in a false value, then the code within the while loop will not be executed. Unlike for loops, while loops conditions can be based on the state of boolean variable and therefore loop for an undetermined number of iterations.

In this simple example of a while loop the number 0 through 9 are logged. Firstly a variable is created outside of the while loop called ‘i’ with the value of 0. This variable is then used within the while loops condition, which is enclosed in the parenthesis, to test is the value is below the number 10. The code inside the while loop contains a log statement, which logs the current value of the variable ‘i’, as well as an increment to add 1 to the current value of ‘i’. Unlike a for loop, the increment is not within the while loop definition. If the incrementation of the variable ‘i’ is removed than the while loop will be executed forever, as the value of ‘i’ will always be 0 and therefore the condition inside the while loop will always result in a true value.

var i = 0;

When creating a for loop the increment always happens after the current loop completes. This isn’t the case within an while loop, you can put the incrementation at any point in the loop. In the below code the number 1 through 10 are logged. The variable ‘i’ starts at the value 0, but is incremented before the log statement, therefore the first value logged is the number 1. The last number logged is the number 10, which may not make sense as the condition of the while loop is to only run the code if the value is below the number 10. The number 10 gets printed as the condition is tested after every successful loop of the code, therefore the variable ‘i’ can be changed to the number 10 and the rest of the loop will continue to execute, but afterwards the condition will be re-checked and it will not run again.

var i = 0;
while(i < 10){
    i += 1;

Numerical values are not required for while loops, boolean values can be used within the condition. Boolean values result in a boolean result, a true or false, thus the condition results in a true or false. However, with no code to modify the state of a boolean a while loop could execute forever, such as the code below.


Similarly you can use a variable that is a boolean data type, instead of just a boolean value. The below example shows how to use a variable that is a boolean data type being used inside the condition of a while loop.

    console.log(myBool + " is true");

A do while loop is another type of loop available in code. Unlike a normal while loop, within a do while loop the code will be executed once regardless of the condition. This is reflected in the syntax, the way you write, the do while loop in JavaScript. The code to be executed comes first and then the condition is after. Within the below example, even though the condition fails, and therefore the code code shouldn’t run, because it is inside a do while loop the code will always be run once, regardless of the condition.

var myBool = false;
    console.log("do while loop");

The conditions inside a while loop, or a do while loop, can contain complex logic using logical operators. You can combine multiple conditions together using the ‘AND’, represented by two ampersand ‘&&” symbols, or the ‘OR’ operator, represented by two pipe ‘||’ symbols. Parenthesis can also be used to group certain conditions together. The below example shows three conditions, the condition will succeed if the variable ‘myBool’ is true and if the the variable ‘i’ is less than the number 10, or the variable ‘otherBool’ is true. If the variable ‘otherBool’ is false but the other conditions passes then the code will execute, if the variable ‘otherBool’ is true but the other conditions are not met then the code will be executed too. Also, due to the OR operator, if all conditions are met then the code will be executed too.

while( (myBool && i < 10) || otherBool){
    console.log("complex condition");

Leave a Reply