# 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?

 ```1 2 3 4 5 6 7``` ``````// Five statements document.write("Here's a line of output.
"); document.write("Here's a line of output.
"); document.write("Here's a line of output.
"); document.write("Here's a line of output.
"); document.write("Here's a line of output.
"); ``````

Not very efficient!

```
// 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 />");

```
##### Thankfully, we have loops!¶
 ``` 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23``` ``````/* 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.
"); loopCounter++; } } ``````

** Click me to run `nonMagic()` **

## 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.

2. Counted Loop

Make the decision first.

 ```1 2 3 4 5``` ``````// 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¶

 ``` 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18``` ``````// 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¶

 ``` 1 2 3 4 5 6 7 8 9 10 11``` ``````// 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++) {
```

## jsLint and the `++` Operator¶

jsLint does not like the `++` operator and will generate a warning message. You can choose to ignore this message in this instance or choose to use the `+= 1` instead. 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