for loops

for loops are special loops.

The syntax might be a little bit confusing at first, but you will find yourself using them soon, because they are very useful.

Here is what the syntax looks like:

 for (initialize variable; condition; statement) {
 // code to be executed
 }

Between the parentheses following the for statement, there are three parts, separated by semi-colons.

• The first one initializes the variables that can be used in the for loop.
• The second one is a condition: as long as this condition is true, the loop will keep on iterating. This condition gets checked after initializing the variables before the first iteration (this will only take place when the condition evaluates to true).
• The last one is a statement. This statement gets executed after every iteration.

Here is the flow of a for loop:

1. Initialize the variables.
2. Check the condition.
3. If the condition is true, execute the code block. If the condition is false, the loop will end here.
4. Perform the statement (the third part, for example, i++).
5. Go back to step 2.

This is a simple example that logs the numbers 0 to 10 (excluding 10) to the console:

 for (let i = 0; i < 10; i++) {
 console.log(i);
 }

It starts by creating a variable, i, and sets this to 0. Then it checks whether i is smaller than 10. If it is, it will execute the log statement. After this, it will execute i++ and increase i by one.

If we don’t increase i, we will get stuck in an infinite loop, since the value of i would not change and it would be smaller than 10 forever. This is something to look out for in all loops!

The condition gets checked again. And this goes on until i reaches a value of 10. 10 is not smaller than 10, so the loop is done executing and the numbers 0 to 9 have been logged to the console.

We can also use a for loop to create a sequence and add values to an array, like this:

 let arr = [];
 for (let i = 0; i < 100; i++) {
 arr.push(i);
 }

This is what the array looks like after this loop:

 [
 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83,
 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95,
 96, 97, 98, 99
 ]

Since the loop ran the block of code 100 times, starting with an initial value of 0 for i, the block of code will add the incrementing value into the array at the end of the array.

This results in an array that has a count of 0–99 and a length of 100 items. Since arrays start with an index value of zero, the values in the array will actually match up with the index values of the items in the array.

Or we could create an array containing only even values:

 let arr = [];
 for (let i = 0; i < 100; i = i + 2) {
 arr.push(i);
 }

Resulting in this array:

 [
 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20,
 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42,
 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64,
 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86,
 88, 90, 92, 94, 96, 98
 ]

Most commonly, you will see i++ as the third part of the for loop, but please note that you can write any statement there.

In this case, we are using i = i + 2 to add 2 to the previous value every time, creating an array with only even numbers.

Practice exercise 3.5

In this exercise we will use a for loop to create an array that holds objects. Starting with creating a blank array, the block of code within the loop will create an object that gets inserted into the array.

1. Setup a blank array, myWork.
2. Using a for loop, create a list of 10 objects, each of which is a numbered lesson (e.g. Lesson 1, Lesson 2, Lesson 3….) with an alternating true/false status for every other item to indicate whether the class will be running this year. For example:

name: 'Lesson 1', status: true

1. You can specify the status by using a ternary operator that checks whether the modulo of the given lesson value is equal to zero and by setting up a Boolean value to alternate the values each iteration.
2. Create a lesson using a temporary object variable, containing the name (lesson with the numeric value) and predefined status (which we set up in the previous step).
3. Push the objects to the myWork array.
4. Output the array to the console.

After completing the exercise, you can find the answers in the download section.