En el Manual de Javascript hemos recorrido ya diversos artículos para hablar de bucles. En este momento no debería haber ningún problema para poder crear los distintos tipos de bucles sin problemas, no obstante, queremos dedicar un artículo completo a tratar acerca de uno de los usos más habituales de los bucles, que podremos encontrar cuando estemos haciendo programas más complejos: la anidación de bucles.

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. Si en vuestra experiencia como programadores los habéis anidado un bucle todavía, tener certeza que más tarde o temprano os encontraréis con esa necesidad.

Operaciones típicas para las que podríamos necesitar un bucle anidado

Los bucles anidados se necesitan para hacer muchas cosas. Algunos algoritmos que requerirían bucles anidados serían:

• Recorrer una estructura de datos compleja
• Recorrer todos los elementos de un array multidimensional
• Realizar ordenación de elementos de un array

Son algunas ideas así de manera genérica, pero la naturaleza de tu algoritmo podría requerir la realización de bucles anidados cuando consistan en hacer repeticiones dentro de repeticiones. Por ejemplo, si quieres sacar todas las tablas de multiplicar del uno al diez, necesitarías un bucle para cada tabla de multiplicar, y otro bucle para iterar del 1 al 10.

Ejemplo de un bucle anidado

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

for (let i=0; i < 10; i++){ 
   	for (let 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, lo primero que se imprimirá será el texto "0-0" en la página web.

Debido al flujo del programa en esquemas de anidación como el que hemos visto, 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.

Ejemplo de recorrido de un array multidimensional en Javascript

Creo que sería una buena práctica mostrar un ejemplo de bucle anidado para recorrer un array multidimensional en Javascript.

Un array multidimensional es aquel que tiene otros arrays en cada una de sus casillas. Por ejemplo, podríamos definir un array multidimensional de esta manera:

let arrayMultidimensional = [
    [4, 6, 7],
    [6, 1, 6],
    [81, 0],
    [3, 9, 64, 7],
]; 

Ahora podemos ver un bucle sencillo para hacer el recorrido con el bucle anidado:

for(let i = 0; i < arrayMultidimensional.length; i++) {
    for(let j = 0; j < arrayMultidimensional[i].length; j++) {
        console.log(arrayMultidimensional[i][j]);
    }
}

Como podemos ver, se realizan dos bucles. El bucle más general se encarga de recorrer las casillas del arrayMultidimensional y luego, como cada una de sus casillas es a la vez otro array, necesitamos un bucle anidado para recorrerlas también.

4
6
7
6
1
6
81
0
3
9
64
7

Ahora, por su quieres verlo y estudiarlo con calma, te pongo aquí un código que permite mostrar este array multidimensional de una manera más legible, mostrando su contenido tal como está organizado, en filas.

for(let i = 0; i < arrayMultidimensional.length; i++) {
    let numeros = '[';
    for(let j = 0; j < arrayMultidimensional[i].length; j++) {
        numeros += arrayMultidimensional[i][j];
        if(arrayMultidimensional[i].length-1 > j) {
            numeros += ', ';
        }
    }
    numeros += "]";
    console.log(numeros);
}

Espero que te sirva de ejemplo un poco más elaborado de recorridos a arrays multidimensionales.

Ejemplo de bucle anidado en Javascript con do while

En todos los ejemplos anteriores hemos realizado recorridos con bucles anidados donde se han usado bucles for. Eso no es una norma!! puedes hacer bucles anidados con todo tipo de bucles, for, while, do while.

Para que lo veas vamos a realizar ahora una práctica en la que solicitamos al usuario un número entero y le mostramos todos los números enteros impares que sean menores al número entero proporcionado.

do {
    let numero = prompt('Dame un número entero', '');
    let entero = parseInt(numero);
    if(entero != numero) {
        alert('No has escrito un número entero');
    } else {
        let imparesMenores = [];
        for(let i = entero -1; i > 0; i--) {
            if(i % 2 != 0) {
                imparesMenores.push(i);
            }
        }
        alert('Los impares menores que ' + entero + ' son ' + imparesMenores.join(', '));
    }
} while(confirm('Quieres continuar?'));

En el bucle do while realizamos iteraciones hasta que el usuario nos diga que no quiere continuar.

Dentro del bucle while:

• Se pide un número
• Se comprueba que sea un entero con la función parseInt() de Javascript.
• Si no era un entero, simplemente se muestra un mensaje al usuario y no se hace nada más
• Si era un entero, entonces hacemos un bucle anidado en el que se obtienen todos los impares menores, que se van metiendo en un array.
• Por último se muestran los impares menores en una caja de diálogo

Con este artículo más bien práctico sobre anidación de bucles, terminamos el tema de las estructuras de control. Ahora pasaremos a otra sección de este Manual de Javascript, en la que trataremos sobre las funciones.