JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.


The While Loop

The while loop executes a specified statement as long as the specified condition evaluates to true.

The while loop has the following syntax:

while (condition) {
    // execute code as long as condition is true
}
Run code

Note: If you are using a variable with the condition, initialize it before the loop, and increment it within the loop. If you forget to increase the variable, the loop will never end. This will crash your browser.


Infinite Loops

An infinite loop, as the name suggests, is a loop that will keep running forever. If you accidentally make an infinite loop, it could crash your browser or computer. It is important to be aware of infinite loops so you can avoid them.

A common infinite loop occurs when the condition of the while statement is set to true.

An infinite loop will run forever, but the program can be terminated with the break keyword.


The Do...While Loop

The do...while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

The do...while loop has the following syntax:

do {
   // statement(s) to be executed
}
while (condition);
Run code

Do not forget to increase the variable used in the condition, otherwise the loop will never end.

Note: This loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

Run code

Difference Between while and do...while Loop

The while loop differs from the do...while loop in one important way — with a while loop, the condition to be evaluated is tested at the beginning of each loop iteration, so if the conditional expression evaluates to false, the loop will never be executed.

With a do...while loop, on the other hand, the loop will always be executed once even if the conditional expression evaluates to false, because unlike the while loop, the condition is evaluated at the end of the loop iteration rather than the beginning.


Comparing For and While Loops

If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with initialization and final-expression omitted.

The loop in this example uses a for loop to collect the fruit names from the fruits array:

Run code

The loop in this example uses a while loop to collect the fruit names from the fruits array:

Run code