> Manuales > Manual de JavaScript

Qué es un bucle anidado. Qué tipo de operaciones se pueden hacer con los bucles anidados. Ejemplos de anidación de bucles en Javascript.

Bucles anidados en Javascript

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:

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.

La salida que mostrará este programa está en la consola, por lo que tendrás que abrir las herramientas de desarrollo y activar la consola de Javascript para poder encontrarla.

Lo que verás en la consola es esta secuencia de números:

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:

La función parseInt() simplemente convierte cualquier cosa que le pases en un entero. Si no lo puede convertir te pasa una cosa que se llama NaN (not a number). Se usa en muchos ejemplos. Si no la conoces anteriormente puedes verla en el artículo de funciones integradas en Javascript.

Nota: Veremos más cosas con bucles anidados en capítulos posteriores, aunque si queremos adelantarnos un poco para ver un nuevo ejemplo que afiance estos conocimientos podemos ir viendo un ejemplo en el Taller de Javascript sobre bucles anidados, donde se construye la tabla con todos los colores puros en definiciones de 256 colores.

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual