Day 4: Loops

Lesson 3: For Of

There's a joke in computer science that won't quite make sense to you yet, it neatly illustrates one of the most common causes of bugs in code that the for of loop handles. The joke is:

There are only two hard problems in computer science:

1. Cache invalidation
2. Naming things
3. Off by one errors

There's a couple of jokes in here, but the one we care about is there being one more problem in the list than mentioned in the set up.

This is called an off by one error and is usually down to that whole "arrays start at 0" thing or forgetting to add or remove an equals to an equality check like < vs <= for less than or less than or equal to.

Here's an example

<h1>Hello World<h1>

let ages = [4,8,11,20];

for(let counter = 0; counter <= ages.length; counter++) {
  console.log(ages[counter]);
}

You can see in the code above that while I have used the handy .length array property to get it's length, I've used <= for the loop condition. So rather than looping through 4 elements the loop runs for 5 iterations and there is no 5th element for this array.

We could of course fix it by changing the <= to a simple < but wouldn't it be nice if we could just skip this type of problem all together?

Well, let me introduce you to the for of loop.

<h1>Hello World<h1>

let ages = [4,8,11,20];

for(const age of ages) {
  console.log(age);
}

Here we replace the conditions part of the for loop declaration (the bit between the ( )) with const age of ages.

Which is a quick way of saying:

We are going to loop over ages, and for each element of ages we are going to create a new, temporary variable called age that stores the iterations age in so we can use it in the loop.

You can see from the console.log()'s that it works, and at no point did we have to worry about counters, end conditions or off by one errors.