Completo tutorial de JavaScript - Bucles anidados en Javascript

Anidar un bucle consiste en meter ese bucle dentro de otro. La anidación de
bucles es necesaria para hacer determinados procesamientos un poco más complejos
que los que hemos visto en los ejemplos anteriores y seguro que en vuestra
experiencia como programadores los habréis utilizado ya o los utilizareis en un
futuro.

---

Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de
explicarlo a la vista de estas líneas:

---

for (i=0;i<10;i++){

---

    for (j=0;j<10;j++) {

---

    document.write(i + "-" + j)

---

    }

---

}

---

La ejecución funcionará de la siguiente manera. Para empezar se inicializa el
primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa
el segundo bucle, con lo que la variable j valdrá también 0. En cada iteración
se imprime el valor de la variable i, un guión ("-") y el valor de la variable
j, como las dos variables valen 0, se imprimirá el texto "0-0" en la página web.

---

El bucle que está anidado (más hacia dentro) es el que más veces se ejecuta, en
este ejemplo, para cada iteración del bucle más externo el bucle anidado se
ejecutará por completo una vez, es decir, hará sus 10 iteraciones. En la página
web se escribirían estos valores, en la primera iteración del bucle externo y
desde el principio:

---

0-0

---

0-1

---

0-2

---

0-3

---

0-4

---

0-5

---

0-6

---

0-7

---

0-8

---

0-9

---

Para cada iteración del bucle externo se ejecutarán las 10 iteraciones del bucle
interno o anidado. Hemos visto la primera iteración, ahora vamos a ver las
siguientes iteraciones del bucle externo. En cada una acumula una unidad en la
variable i, con lo que saldrían estos valores.

---

1-0

---

1-1

---

1-2

---

1-3

---

1-4

---

1-5

---

1-6

---

1-7

---

1-8

---

1-9

---

Y luego estos:

---

2-0

---

2-1

---

2-2

---

2-3

---

2-4

---

2-5

---

2-6

---

2-7

---

2-8

---

2-9

---

Así hasta que se terminen los dos bucles, que sería cuando se alcanzase el valor
9-9.

---

Veamos un ejemplo muy parecido al anterior, aunque un poco más útil. Se trata de
imprimir en la página las todas las tablas de multiplicar. Del 1 al 9, es decir,
la tabla del 1, la del 2, del 3...

---

for (i=1;i<10;i++){

---

    document.write("<br><b>La tabla del " + i + ":</b><br>")

---

    for (j=1;j<10;j++) {

---

       document.write(i + " x " + j + ": ")

---

       document.write(i*j)

---

       document.write("<br>")

---

    }

---

}

---

Con el primer bucle controlamos la tabla actual y con el segundo bucle la
desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando
la tabla que estamos escribiendo, primero la del 1 y luego las demás en orden
ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de
cada tabla.