Repetition

Repetition means Looping

In programming we always use a loop when we want our program to repeat something.

Question

What if you want to have a piece of code that does the same thing 5 times?

// Five statements

document.write("Here's a line of output.<br />");
document.write("Here's a line of output.<br />");
document.write("Here's a line of output.<br />");
document.write("Here's a line of output.<br />");
document.write("Here's a line of output.<br />");

Not very efficient!

Thankfully, we have loops!

/* It's not magic */

function nonMagic() {
    "use strict";

    // A non-magical way to run that statement five times

    // Declare Constants
    const INITIAL_VALUE = 0;
    const LOOP_LIMIT = 5;

    // Declare Variables
    let loopCounter;

    // Assign initial values to variables
    loopCounter = INITIAL_VALUE;

    // Here's the real magic cloud
    while (loopCounter < LOOP_LIMIT) {
        document.write("Here's a line of output.<br />");
        loopCounter++;
    }
}

** Click me to run nonMagic() **

Note: Refresh the page to return to the course content

Steps of a Loop

1. The condition is evaluated.
2. If the condition is true, the code within the loop runs
3. The program goes back the check the condition again.
4. This repeats over and over again, until the condition is false

Demo

1. Demo: Basic Looping
   • unit04/demos/demo-looping.html

---

Looping Structures

We have two main looping structures that we're going to learn in this course.

1. Leading Decision Loop
2. Counted Loop

---

Leading Decision Loop

Make the decision first.

// while loop

while (condition generates a Boolean true) {
    // do the statements in here
}

• The condition is tested first, before the code inside the loop is run. If the condition is true then the code is run.

• After all the statements in the loop are run then the condition is tested again. If it is still true then the code in the loop is run again.

• Then the condition is tested again until it is false.

---

Counted Loop

The concept of counted looping is simple, you do something a specified number of times.

New Coding Standard

While Loop spacing

Much like the if statement, spacing is important for readability

while Loop

// Looping a fixed number of times

// Declare Constants
const INITIAL_VALUE = 0;
const LOOP_LIMIT = 10;

// Declare Variables
let loopCounter;

// Assign initial values to variables
loopCounter = INITIAL_VALUE;

while (loopCounter < LOOP_LIMIT) {
    // statement block here

    // add 1 to counter at the end of the loop
    loopCounter++;
}

• We create a variable and initialize it to 0.

• We start the loop by testing our variable against the number of times we want to loop. In this case we want to loop 10 times.

• Then we run the statement block, this will be our working code.

• At the end of the loop we have to add 1 to our "counter" variable. If this step is forgotten our loop will run forever.

• But, this is not most common use of the while loop in programming. It is better suited for loops where we don't know how many times it's going to run. For a counted loop in JavaScript we usually use this:

New Coding Standard

For Loop spacing

Much like the if statement, spacing is important for readability

for Loop

// JavaScript "for" loop

// Declare Constants
const INITIAL_VALUE = 0;
const LOOP_LIMIT = 10;

let loopCounter;

for (loopCounter = INITIAL_VALUE; loopCounter < LOOP_LIMIT; loopCounter++) {
    // statement block here
}

• This does exactly the same thing as the previous while loop. However, managing the loop counter is built in, you can't forget to have the counter variable or it won't run.

• This loop is more concise and is preferred when we know how many times a loop should be run.

• The for has three parts in between the parentheses, initialization, test, increment.

1. First the counter variable is set to zero. This happens only once before the loops starts.

for (counter = 0; counter < LOOP_LIMIT; counter++) {

2. This middle part is the test, it's just the same as inside a while loops parentheses.

for (counter = 0; counter < LOOP_LIMIT; counter++) {

3. At the end is the increment step. This is run after the loop statements are run.

for (counter = 0; counter < LOOP_LIMIT; counter++) {

The best writing is rewriting. -E. B. White

Labs

1. Lab01: Your First While Loop
   • unit04/labs/lab-01-first-while.html
2. Lab02: Your First For Loop
   • unit04/labs/lab-02/first-for.html