More on Loops using while, do while, and for

CS133JS Beginning Programming: JavaScript

Table of Contents

Introduction

Announcements

• Do a code review for a lab partner, if you haven't already.

• Lab 3 production version is due tomorrow (Thursday).

• Next week is the midterm.

Q and A

• How is lab 4, part 1 going?

• Does anyone have any general questions about anything?

Review

Repetition Using while

This is a pretest loop The variables used in the loop condition must be declared outside the loop.

xxxxxxxxxx
// Number guessing game
let guess = 0;
while(guess != 6)   // 6 is the number to guess
{
   guess = prompt("Enter your guess.");
}
alert("You got it!");

Repetition Using do while

This is a post-test loop The variables used in the loop condition must be declared outside the loop in this one too.

xxxxxxxxxx
// Input validation
do
{
   alert("Please enter a temperature between -100 and 150")
   temperature = prompt("Enter the temperature");
} while(temperature < -100 || temperature > 150);
// Do something with temperature

Repetition Using for

This is a loop with a built-in counter The loop counter's scope is local to the loop.

xxxxxxxxxx
// Count from 1 to 10
for (let i = 1;  i <= 10;  i++) 
{                               
   console.log(i);
}

Interrupting Loop Iteration

We can interrupt the normal flow of execution in a loop using break, or continue, but these are rarely needed. You can almost always control the execution of your loop by choosing the right kind of loop and the right loop condition. These are only used as a lost resort, because they make your code more complex.

break

This causes execution to jump out of the loop.

Example of a for loop that uses break

xxxxxxxxxx
// Count from 1 to 10
for (let i = 1; ;  i++) 
{                               
   console.log(i);
   if(i > 10)             // Is there any advantage to doing it this way?
     break;
}

continue

This "short-circuits" the execution so it jumps over the rest of the statements in the loop.

Example of a for loop that uses continue

xxxxxxxxxx
// Count from 2 to 10 by twos
for (let i = 1; i <= 10;  i++) 
{  
   if (i % 2 != 0)
     continue;           // could we change this to just an if without continue?
   console.log(i);
}

Nested Loops

We can put one loop inside another.

Example: a while loop nested in a do while loop

xxxxxxxxxx
// Number guessing game
let playAgain = "";
do
{
    let guess = 0;
    while(guess != 6)   // 6 is the number to guess
    {
       guess = prompt("Enter your guess.");
    }
    alert("You got it!");
        playAgain = prompt("Do you want to play again?");
} while (playAgain == "yes");

Example: nested for loops

xxxxxxxxxx
// Create a multiplication table
for (let i = 1; i < 10;  i++)    // counts down the rows
{  
    let row = "";
    for (let j = 1; j < 10; j++)   // counts across the rows
    {
        row += i * j + "\t";    // put a tab between each number
    }
    console.log(row);
}

Note: The console needs to be wide enough to show the rows without wrapping.

Q: What would you need to change to use this code in a web page¹?

• "\t" ?

• console.log(row) ?

• Add something to start a new line?

Debugging

• Check console error messages.

• Use the debugger.

  • Breakpoints

  • Stepping line-by-line.

  • Checking values of variables.

• Use alerts.

• Remove suspect code by "commenting it out".

• Test snippets of code in the console.

• Watch out for infinite loops!

Best Practices

• If a loop is inside a function, don't put a return statement inside the loop.

• Don't use an if statement inside a loop in order to control iterations.
  But you can use an if statement inside a loop for other purposes.

• Don't change the value of a loop counter inside the body of a for loop.

Reference

Mozilla Developer Network

Loops and Iteration

The Firefox JavaScript Debugger

Beginning JavaScript Lecture Notes by Brian Bird, 2018, revised 2024 are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.