Day 4: Loops

Lesson 1: For

Here's an array:

1let family = ["Ben", "Emily", "Saj", "Vahid"];

We want to loop through that array and print the names out. We can do that with a for loop. Conceptually a for loop is:

1tasks before the loop
2
3for each number starting at 0 until the last number {
4do this thing
5}
6
7tasks after the loop

You can see how do this thing is on it's own line, it's a self contained task that will be run for every iteration of the loop. The control of the loop is managed by for each number starting at 0 until the last number and the tasks after the loop won't run until every iteration of the loop is done.

Now let's look at the JavaScript for this:

1for (let loopCounter = 0; loopCounter < 5; loopCounter++) {
2  console.log(loopCounter);
3}

1. for () { } tells the JavaScript engine that we are about to declare a for loop. The contents of the ( ) are the conditions for the loop and the code between the { } are what will be executed for each iteration of the loop.

2. let loopCounter = 0; this seeds our for loop. We could call it anything (historically i or index are used but calling it loopCounter is clearer in my book) and we could start it at any value but 0 makes the most sense as eventually we want to loop over that array.

3. loopCounter < 5; this is the run condition of the for loop. So long as loopCounter is less than 5 the code between the { } will be executed.

4. loopCounter++ This is the change condition of the loop. Each time the code between the { } is executed. In this case we have used a shorthand for loopCounter = loopCounter + 1, so each time the loop runs loopCounter is increased by 1. We can use whichever calculation we want here, but since we want to look at each item in the array, increasing by 1 is perfect.

5. console.log(loopCounter); is between the for loops { } and so this is executed on each iteration of the loop. loopCounter is accessible inside the { } and so we can see how it changes each loop.

Let's see it in action

<h1>Hello World<h1>

for(let loopCounter = 0; loopCounter < 5; loopCounter++) {
  console.log(loopCounter);
}

console.log("Loop finished");

Great! You should see 0, 1, 2, 3, 4 printed out one after another.

Notice how it starts at 0 (because that's what we seeded loopCounter with) but ends at 4? Well it ends at 4 because the run condition loopCounter < 5; is checked before the code is run so as soon as loopCounter is not less than 5 it will stop the loop and move on to the next block of code.

So, how do we use this to print out our array?

<h1>Hello World<h1>

let family = ["Ben", "Emily", "Saj", "Vahid"];

for(let loopCounter = 0; loopCounter < 4; loopCounter++) {
  console.log(family[loopCounter]);
}

The key bit here is using the ever increasing loopCounter to read the contents of the array at each location by doing family[loopCounter].

Challenges

In the playground below I want you to see what happens when you:

1. Start loopCounter at 2
2. Start loopCounter at 10
3. Set the loop to stop at 25
4. Increase loopCounter by 2 instead of 1

If things become unresponsive it's because the playground got stuck in an infinite loop, so don't delete the new line I've added if (loopCounter === 500) break; this is a crude infinite loop protector.

<h1>Hello World<h1>

for(let loopCounter = 0; loopCounter < 5; loopCounter++) {
  console.log(loopCounter);
  if (loopCounter === 200) break;
}

console.log("Loop finished");

You are still quite likely to hit an infinite loop issue due to the way that the playground works, just refresh your page or, if that doesn't work, wait for your browser to realise it's probably in an infinite loop and it will show up a refresh message for you.