# Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast

# Froot Loops

So, we’ve learned most of the major things we need to know in order to program. We’re nearly ready to create some cool stuff. There are just a couple more things we need to know before we jump start writing proper programs.

Remember Mrs. Potts and the poor starving children? I wonder what happened with that. Do you think the children were OK? I hope so. We helped Mrs. Potts a lot by giving her a makeSandwich function, but she still needs to call it a lot of times. What if there was an easy way for her to call the makeSandwich function 10 times, 100 times, a million times without writing one more line of code.

Thankfully there is! Enter Loops!

## While Loops - Get them while you can!

A while loop in JavaScript is a type of loop that will keep going while some condition is true. For example

``````let sandwichesMade = 0;

}``````

First we set the number of sandwiches we have made so far:

``let sandwichesMade = 0;``

Then we say to the Javascript engine

``````while (sandwichesMade < 5) {
//do something
}``````

This is the loop. It will go round until the condition sandwichesMade < 5 is not true any more. WHILE the condition is true, kindly DO the thing between the curlies, then come chanck again and check again.

Inside the loop we have to remember to do this:

``sandwichesMade = sandwichesMade + 1;``

This increases the value of sandwichesMade. Without this, the loop will go around forever until the page times out or the universe ends.

## Exercise - Countdown

1. Create an html file and linked javascript file.
2. Enter the code in the previous section.
3. Run it. What happens?
4. Try to modify your code to make a javascript countdown. Start at 10 and count down to 0.
5. Alert the string “Lift Off Mrs Potts!” when the countdown reaches zero.

``````let i = 10;

while (i > 0) {
i = i - 1;
}

To tackle this problem, we need a variable to store the current countdown. Here I have called it i. While i is > 0, we continue to execute the code in between the curly braces, reducing the value of i. When i drops below zero, the loop exits and the lift off line is run.

When the loop finishes, the program continues to the next line and we alert “Lift off Mrs Potts”!

## Exercise - Looping function

1. Create an html file and linked javascript file.
2. Write a function called countdown that accepts a number parameter.
3. When you call the function, it should alert the numbers down to zero, starting at the number passed to it.

``````let countdown = function (i) {
while (i > 0) {
i = i - 1;
}
};

countdown(35);``````

## Exercise - infinite loop

Try to write code that counts from zero to infinity, never stopping. You need a condition that always evaluates to true. Hmmm, what is always true?

``````let i = 0;

while (true) {
i = i + 1;
}``````

Notice `while true`. A while loop will keep looping over the code in between the braces while the condition is true. True is always true (by definition) so it’ll keep going forever.

## For Loops - for he’s a jolly good fellow

The next type of loop we need to know is the for loop. This type of loop is similar to the while loop, but we roll all the various different parts of it up into one line, like so:

``````for (let sandwichesMade = 0; sandwichesMade < 5; sandwichesMade++) {
}``````

This loop says:

• The loop continues as long as `sandwichesMade < 5`.
• At the end of each loop increase `sandwichesMade` by one.
``sandwichesMade++;``

is just shorthand for add one to the `sandwichesMade` variable.

This type of loop wraps up a common looping pattern where we create a variable, check to see if the loop should continue executing, and modify the variable.

## Questions

1. Create an html file and linked javascript file.
2. Enter the code above.
3. Run it. What happens?
4. Try to make 20 sandwiches.
5. Change the code to make sandwichesMade start from 10 and count down to zero.

``````for (let sandwichesMade = 10; sandwichesMade > 0; sandwichesMade--) {