Nested Loops in Javascript

We explain what a nested loop is, how they work and what they are for. We see some examples.

In it we have already gone through various articles to talk about loops. At this moment there should be no problem to be able to create the different types of loops without problems, however, we want to dedicate a whole article to deal with one of the most common uses of loops, which we can find when we are making more complex programs : the nesting of loops.

Nesting a loop is to put that loop inside another. The nesting of loops is necessary to make certain processing a little more complex than what we have seen in the previous examples. If in your experience as programmers you have still nested a loop, be sure that sooner or later you will find yourself with that need.

A nested loop has a structure like the following. Let’s try to explain it in view of these lines:

for (i=0;i<10;i++){ for (j=0;j<10;j++) { document.write(i + "-" + j) } }

The execution will work as follows. To begin with, the first loop is initialized, making variable i equal to 0, and then the second loop is initialized, making variable j equal to 0. On each iteration, the value of variable i is printed, a hyphen (” -“) and the value of the variable j, since both variables are equal to 0, the text “0-0” will be printed on the web page.

Due to the flow of the program in nesting schemes like the one we have seen, the loop that is nested (furthest inside) is the one that is executed the most times. In this example, for each iteration of the outermost loop, the nested loop will be executed completely once, that is, it will do its 10 iterations. These values ​​would be written to the web page, on the first iteration of the outer loop and from the beginning:

0-0

0-1

0-2

0-3

0-4

0-5

0-6

0-7

0-8

0-9

For each iteration of the outer loop, the 10 iterations of the inner or nested loop will be executed. We have seen the first iteration, now we are going to see the following iterations of the outer loop. In each one, it accumulates a unit in the variable i, with which these values ​​would come out.

1-0

1-1

1-2

1-3

1-4

1-5

1-6

1-7

1-8

1-9

And then these:

2-0

2-1

2-2

23

2-4

2-5

2-6

2-7

2-8

2-9

So until the two loops are finished, which would be when the value 9-9 is reached.

Let’s see an example very similar to the previous one, although a little more useful. It is about printing on the page all the multiplication tables. From 1 to 9, that is, the table of 1, 2, 3…

for (i=1;i<10;i++){ document.write("
The table of ” + i + “:
“) for (j=1;j< 10;j++) { document.write(i + " x " + j + ": ") document.write(i*j) document.write("
“) } }

With the first loop we control the current table and with the second loop we expand it. In the first loop we write a header, in bold, indicating the table we are writing, first the one with 1 and then the others in ascending order up to 9. With the second loop I write each of the values ​​of each table. It can .

Note: We will see more things with nested loops in later chapters, although if we want to go ahead a bit to see a new example that consolidates this knowledge we can see a , where the table is built with all the pure colors in definitions of 256 colors.

With this rather practical article on loop nesting, we wrap up the topic of control structures. We will now move on to another section of this , in which .