Please enable JavaScript to use CodeHS

Intro to JavaScript Textbook

1. Basic JavaScript and Graphics

2. JavaScript Control Structures

2.1 Booleans

2.2 Logical Operators

2.3 Comparison Operators

2.4 If Statements

2.5 For Loops

2.6 Random Numbers

2.7 While Loops

While Loop In Action

While Loop Countdown

While Loops with User Input

Beware of Infinite Loops

Check Your Understanding

Exercise: Inventory

2.8 Loop and a Half

2.9 Functions and Parameters

2.10 Functions and Return Values

2.11 Local Variables and Scope

3. Animation and Games

4. Basic Data Structures

Chapter 2

JavaScript Control Structures

2.7 While Loops

While loops are a way to repeat a block of code while a certain condition is true. Here’s the basic structure of a while loop:

while(boolean expression){ 
    // code to execute if the condition is true
}

// code to execute if/once condition is false
JavaScript

The code that goes inside of the curly braces will be executed repeatedly until the condition in parentheses becomes false. Once the condition becomes false, the program continues to the code following the while loop body.

For example, suppose you are eating a bowl of cereal for breakfast. The while loop controlling your actions could look like this:

while(cerealLeftInBowl == true){
    eatCereal();
}
packLunch();
JavaScript

In English, this means that while there is cereal left in your bowl, eat the cereal. Once the cereal is gone, stop eating cereal and continue on to the next part of your morning routine, packing your lunch. So, once the condition cerealLeftInBowl == true evaluates to false, the program will continue to the next statement.

Notice that while loops are similar to for loops. The main difference is that while loops allow you to repeat code an unknown number of times. With this in mind, while loops are very convenient when you want to repeat code based on user input.

While Loop In Action

See a walk through of a while loop below:

While Loop Walk Through

While Loop Countdown

This while loop counts down from 10 to 1, printing out the numbers as it goes.

Note that this is slightly different than when you used a for loop to print out a countdown. When you use a while loop, you have to create the variable in the condition outside of the loop, and you decrement the value inside of the loop.

While Loops with User Input

Let’s look at a while loop that incorporates user input:

var code = 3;
var userGuess = 0;

while(userGuess != code){
    userGuess = readInt("Guess my number!");
}

println("Yup! 3 is my number!");
JavaScript

In English, this program asks the user to guess a number. While the user guesses an incorrect number, they’re asked to input another number. As soon as they get it right, the program will end.

Beware of Infinite Loops

Infinite loops occur when there is no way for the boolean condition to become false. For example, if you had forgotten to put i--; in the first example, the value of i would never change. Every time the condition was checked, i would be 10, making the condition always true. The loop would run forever!

// This is an infinite loop!
var i = 10;
while(i > 0){
    println(i);  // the value of i never changes!
}
JavaScript

To avoid infinite loops, double check that the condition you are using can become false INSIDE of the while loop body. This means that some variable that is used in the while loop condition must be modified inside of the loop.

// This is NOT an infinite loop!
var i = 10;
while(i > 0 ) {
    println(i);  
    i--;  // This line changes the value of i, so the condition will eventually evaluate to false
}
JavaScript

Check Your Understanding

  1. Incorrect Correct No Answer was selected Invalid Answer

    How many times will this program print "hello"?

    var i = 15;
while (i > 3) {
    println("hello");
    i--;
}
    JavaScript

Exercise: Inventory

Write a program that keeps track of a simple inventory for a store. While there are still items left in the inventory, ask the user how many items they would like to buy. Then print out how many are left in inventory after the purchase. You should use a while loop for this problem. A sample run is below.

We have 34 items in inventory.
How many would you like to buy? 4
Now we have 30 left.

We have 30 items in inventory.
How many would you like to buy? 16
Now we have 14 left.

We have 14 items in inventory.
How many would you like to buy? 8
Now we have 6 left.

We have 6 items in inventory.
How many would you like to buy? 5
Now we have 1 left.

We have 1 items in inventory.
How many would you like to buy? 1
Now we have 0 left. 

All out!
Plain text

Make sure you catch the case where the user tries to buy more items than there are in the inventory. In that case, you should print a message to the user saying that their request isn’t possible. For example:

We have 5 items in inventory.
How many would you like to buy? 6
There is not enough in inventory for that purchase.

We have 5 items in inventory.
How many would you like to buy? 5
Now we have 0 left. 

All out!
Plain text

IMPORTANT
In order to pass the Test Cases, your output should look like the samples above, including the blank line between each run. This blank line helps break up the output so that it is easier for the user to read.

You can easily create a blank line by adding a print statement like println("") at the appropriate place in your code.

Vocabulary

Term Definition
Loop

A loop is a way to repeat code in your program.
While Loop

Lets us repeat code as long as something is true.
Condition

A condition is code that you put inside an if statement or while-loop.
Control Structure

A control structure lets us change the flow of the code.
Edge Case

An edge case is a problem in your code that only occurs in extreme situations.
Fencepost Problem

A problem when using a while loop where you forget one action at the beginning or the end.
Counter

A variable used to count the number of times an action has been performed
Iterate

A single run through the instructions contained a loop