The while
loop in JavaScript is yet another type of control structure. For a review on what a control structure is, please see our last post on IF statements.
The main goal of the while
loop is to continually re-run a specific chunk of code over and over again. This is very similar to the for
loop with one important difference. Again, if you aren't familiar with the for
loop, please review the topic here.
Let me take a minute to explain the difference between these two types of loops.
What's the Difference Between a WHILE Loop and a FOR Loop?
The difference between these two loops is how they decide to STOP looping.
You see, the for
loop has a specific and predefined number of iterations that it will make. We know exactly how many times a for
loop will iterate once the code is running and the JavaScript engine starts executing the for
loop's code.
This is in stark contrast to the while
loop. The while
loop keeps looping while a specific condition is true
. Once the condition evaluates to false
then (and only then) will the while
loop stop looping.
The reason why this is so different than the for
loop is that we don't necessarily know when this condition will change from true
to false
, so we can't really guess how many iterations the while
loop will make until it stops.
This is both a good thing and a bad thing.
Pros and Cons of the WHILE Loop
Let me start by addressing the only real “con” to the while
loop.
It can run forever!
If you're in a situation where your while loop keeps looping to infinity, then your program is stuck (or frozen) and you'll need to shut down your browser to terminate the running JavaScript program. Not a very good user experience.
Having said that, an unruly while
loop doesn't typically keep on running forever, because as good programmers we always make sure that our while
loop's condition will at some point evaluate to false
, right?
Right!
So the one rule you need to remember (and follow) is to always make sure that your condition will eventually evaluate to false
.
Alright, having said that. The “pros” to using the while
loop are quite abundant. Having a loop that will continually run until such time that a condition evaluates to false
is very useful.
An example of a while
loop in action would be asking a user for input again and again until they provide a valid input.
WHILE Loop Syntax
The syntax for the while loop is very straight forward.
You'll need to be sure to use the while
keyword as well as defining the condition with which the loop will run. Also, like the other control structures, the while
loop defines a scope.
Here's what the generic code looks like:
while ([condition(s)]) { // insert code to loop over here }
Pretty simple right? The hardest part is to figure out what condition(s) you need to put in the while
loop for it to function properly.
Remember that while the condition(s) is/are true, the loop will continue to run.
Cool, so now let's take a look at a real world example of the while
loop.
WHILE Loop Example
Let's assume we want to prompt the user with a question. We want to ask them to enter a number between 1 and 10.
But what happens if they enter an incorrect value?
Well, we should ask them to enter the value again, and to be sure to abide by the restrictions (i.e. enter a number between 1 and 10).
This is where a for
loop would fail miserably, because how are we supposed to know ahead of time how many times we should ask them for the input… right? We haven't a clue! So in comes the while
loop to save the day.
Here's what that code could look like:
var theNumber = prompt("Please enter a number between 1 and 10."); while (theNumber < 1 || theNumber > 10 || isNaN(theNumber)) { theNumber = prompt("Incorrect value entered, please enter a number between 1 and 10!"); } alert("Great! You entered the number: " + theNumber);
What's interesting to note about the code example above is that we have three separate conditions in the while
loop.
These three conditions are theNumber < 1 || theNumber > 10 || isNaN(theNumber)
. What this is saying is as follows:
- IF
theNumber
is less than 1, OR - IF
theNumber
is greater than 10, OR - IF
theNumber
is NOT a number, then continue looping
So, because we're using the OR operator between each statement, this means that if ANY of the conditions are true
, then the overall while
loop's condition will evaluate to true
, and thus it will continue to loop.
Only in the case that ALL three conditions are false
, will the overall while
loop's condition evaluate to false
, and thus exit the loop.
So now, go ahead and try the code out for yourself!
In Summary
The while
loop is actually the only real loop in modern day programming languages. The for
loop is actually just a special kind of while
loop.
This is the case because you can re-create a for
loop using the while
loop's syntax… watch and learn:
var counter = 0; while (counter < 10) { counter = counter + 1; console.log("The counter is currently at: " + counter); }
As you can see, this code will run exactly 10 times, no more, no less. This is exactly the same functionality as a for
loop.
Neat right?
So you shouldn't be afraid to use the while
loop, because without it, there would be tons of applications out there that just wouldn't work properly at all!
I hope you enjoyed this tutorial, and if you did, be sure to put in your email address in the box below to get a free goodie delivered right to your inbox.