4. Loops

Loops

You can use loops to work on data sets in JavaScript. They allow multiple execution of a given code with different values. It is like an employee assigned to perform constantly repeated tasks. The operation of a loop is interrupted by a specific termination condition. It looks like this:

for (start, end condition, jump) {
// code executed for each iteration (jump) of the loop
}

Imagine that you want to list a few elements from an array. Without using a loop it would look like this:

var ourTable = ["Martin", "Anne", "Agnes", "Albert", "Michael", "Barbra"];
ourTable[0] // => "Martin";
ourTable[1] // => "Anne";
ourTable[2] // => "Agnes";
ourTable[3] // => "Albert";
ourTable[4] // => "Michael";
ourTable[5] // => "Barbra";

With the use of a loop, it looks like this:

for (var i=0; i<6; i=i+1) {
    ourTable[i]     // the loop will list all the names in turn, because each time
                    // variable i will increased by 1
}

• for – loop declaration,
• var i = 0 – loop execution counter, initially 0,
• i < 6 – the end point, and therefore the loop will be performed from 0 to 5, because i is to be smaller than 6,
• i = i + 1 - we told the loop that it should be done from 0 to 5, at an increment of 1. This means that the loop will be performed when i will be equal to 0, 1, 2, 3, 4, or 5 (it will be performed 6 times, jump every 1). If it was i = i + 2, the loop would be executed for i equal to 0, 2, and 4 (it would be executed 3 times, at an increment of 2).

The jump increases the counter by the given value. This can be explained in the example with an employee. Imagine that you give someone the task of putting 10 pens into boxes. Thanks to the i = i + 1 declaration, you tell him to put a pen in each of them, while i = i + 2 means that the employee has to put a pen into every other box.

In the for loop we define a variable that will be a loop counter (start). In the following case it is the i variable, but it can have any name, e.g. counter, j, etc. However, we usually use i. What will happen when we write such a loop:

for (var i=0; i<=5; i=i+1) {
    example += i;
}

Take a look at how it works here:
Example of the loop

The loop counter starts at position 0. The next condition is whether i is less than or equal to 5, if yes, the code is executed. The variable i is added to the variable example, which is larger each time. At the end there is a jump, so i increases its value by 1 (such procedure is called iteration and it can also be written this way: i ++), and the loop is executed again until it reaches the value 6. For the whole loop it looks like this:

Exercise 1

Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

Change the variables num1 and num2 into numbers so that the loop is performed only 5 times. The line underneath shows how many times a loop has been executed.

Go to the first exercise: Run exercise #1

Tip: Remember that loops are usually counted from 0, so when using the character "<=" the loop will be done once more than the number after the sign, e.g.

for(var i = 0; i <= 3; i++) { // The loop will be executed 4 times, when i = 0, 1, 2, 3
    //code to perform
}
for(var i = 0; i < 3; i++) { // The loop will be executed 3 times, when i = 0, 1, 2
    //code to perform
}

Exercise 2

Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

Change the variables num1 and num2 into numbers so that the counter below counts from 0 to 10.

Once you have done this, try changing the condition and start value of the variable so that the counter goes down from 10 to 0.

Exercise 3

Before you start: after clicking the following links for exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

In place of the variable condition, fill the loop so that it displays numbers from 0 to 100, but each jump is made every 10, that is 0, 10, 20, 30, etc.

Tip: In case of problems, return to the section with the description of the for structure and compare it with another sample loop. The last condition of the statement is responsible for the jump of the loop.

Exercise 4

A programmer often uses loops when working with arrays. Look at the JavaScript code for exercise 4. There is a for loop in it, with an array method .length which returns the number of elements in an array.

var array = ["a","b",12, true];
    array.length //returns 4

This is useful because we do not have to manually count how many elements an array has and enter that number into the condition. Perhaps its advantages are not clear in an array of four elements, but if there were 500 or more, the difference would be much more noticeable. When using this method, only remember that it returns the length of the array counting from 1, and the indexes themselves are counted from 0. Looking at the variable above, the last element of the array is its fourth element, but it has index 3.

Complete the conditions of the given loop so that all elements of the array are displayed underneath.

Go to the fourth exercise: Run exercise #4

Tip: If you do not know how to use the length method, look at the pattern in the comment in this exercise.

Next chapter: Arrays »