This article will show you how a JavaScript while loop is constructed, and what it us used for, with code examples.
While loops are one of the simplest kinds of loops, and appear in most programming languages. A while loop runs a block of code repeatedly, until a condition is met. When the while condition is met, the loop stops.
It’s important to get comfortable with using loops – and understanding how they work – as they form the backbone of just about every game and application you might write. Make sure you’re familiar with how loops work, when the condition is checked, and how many times a loop is expected to execute, so your application behaves in the way you intend!
Loops are used to iterate through arrays, used to count, and used to retry actions. For example, loops are used to display table rows on screen (looping over each record in a database and printing it), and used to move enemies around on-screen in video games (looping at a set time interval and updating the position of objects on-screen).
What is a while Loop
A while loop will execute a block of code while a given condition is true. When that condition changes to false, the loop will exit and the code following it will continue executing.
JavaScript while Loop Syntax
The JavaScript while loop has the following syntax:
while (CONDITION){
STATEMENTS
}
Note that:
- CONDITION can be any JavaScript expression which evaluates to a boolean true/false value
- STATEMENTS can be any number of lines of JavaScript code which will be executed every time the loop repeats
- The while loop will execute the STATEMENTS so long as the CONDITION expression evaluates as true or is truthy
- So, to break out of the while loop, your STATEMENTS will need to change something in the CONDITION so that it can no longer be considered true
JavaScript while Loop Examples
Below are some examples of while loops. The statements inside each loop will execute until the loop condition is no longer true.
Notice that the code being executed in the loop changes the condition of the loop so that it exits.
var i = 1;
while (i <= 5){
console.log(i);
i++;
}
Above, a while loop is executed with the condition that the variable i is less than or equal to 5. The code statements executed by the loop increment the value of i after printing it – so that eventually the condition which exits the loop is met.
The above example will output the following to the console:
1 2 3 4 5
For each iteration of the loop, the value of i is printed and then incremented. The loop exits once i reaches 5.
It’s also possible to write a while loop without code brackets if you only want to execute a single statement:
var i = 1; while( i <= 5 ) console.log(i++);
Above, the loop will execute until i reaches 5. The echo statement will print the value of i before it is incremented by the ++ operator.
Beware Infinite Loops!
If your loop never reaches a condition which will cause it to exit, your loop will run indefinitely, freezing your application! This is called an infinite loop, and should be avoided at all costs!
