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;

while (sandwichesMade < 5) {
  alert("Making Sandwich: " + sandwichesMade);
  sandwichesMade = sandwichesMade + 1;
}

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.

let i = 10;

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

alert("Lift off Mrs Potts");

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

countdown(35);

let i = 0;

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

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++) {
  alert("Making Sandwich: " + sandwichesMade);
}

This loop says:

• sandwichesMade starts at 0.
• 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.

for (let sandwichesMade = 10; sandwichesMade > 0; sandwichesMade--) {
  alert("Making Sandwich: " + sandwichesMade);
}

Well done, you’re doing really nicely! In the next section we’ll look at Arrays and Functional Loops, then Objects, and that’s it, those are all the fundamentals of Code!