07. JS, Estructuras iterativasLas estructuras de control iterativas en JavaScript

La estructura de control iterativa, repetitiva o de bucle permite repetir una tarea un número de veces determinado. En JavaScript tienes tres clases, son las siguientes:

• for
• while
• do ... while

for

Cuando sabes a priori el número de veces que se tiene que repetir una operación o tarea, utilizarás la estructura for.

Su estructura de control está compuesta por tres componentes o declaraciones diferenciadas:

for ((declaración 1); (declaración 2); (declaración 3)) {
    ... grupo de acciones ...;
}

La declaración 1 es una expresión de inicialización, es decir, se asigna un valor inicial a una variable, que generalmente se la llama i (índice o iterador).

La declaración 2 es la expresión de condición que hace que el bucle acabe. Por ejemplo, i<=10, lo cual quiere decir que mientras la variable i tenga un valor inferior o igual a 10 se irá repitiendo continuamente.

La declaración 3 representa que incremento o decremento debe adoptar la variable i en cada ciclo. Suele ser lo más normal una unidad, lo cual se representa así i++ (incrementa 1 unidad) o i-- (decremento de 1 unidad). También podría augmentar de dos en dos (i + 2).

for ((expresion inicialización); (condición de salida); (incremento o decremento)) {
   ...grupo de acciones ...
}

Con esta estructuras tienes dos opciones; o bien la inicializas en un valor bajo (0 o 1), y vas incrementado su valor. O al revés, inicializas la variable en un valor más alto y vas decrementado hasta llegar a cierto valor.

Cuando optas por incrementar sale algo así:

for (i = 0; i <= 10; i++) {
    document.write("5 X " + i + "= " + i*5 + "<br>");
}

Este pequeño código muestra la tabla de multiplicar del 5, desde el 0 hasta el diez.

Si quieres implementar la estructura for de forma descendiente lo harás así:

for (i = 10; i >= 0; i--) {
    document.write("5 X " + i + "= " + i*5 + "<br>");
}

Lo cual hará lo mismo, la tabla de multiplicar del 5, pero en sentido descendiente, primero 5*10 hasta 5*0.

El diagrama de flujo de la estructura for es la siguiente:

while

La estructura de control while se basa en la repetición de una tarea o acciones mientras se cumple una condición.

De una manera natural te harás la siguiente pregunta:

mientras se cumpla la (condición), se ejecutarán las siguientes { ... (acciones)
}

Que traducido a Javascript sería algo así:

while (condicion) {
   ... grupo de acciones ...
}

Tienes que tener en cuenta que en este tipo de estructura iterativa, la variable se tiene que inicializar fuera del bucle y su incremento, dentro del bucle while.

Seguimos con el mismo ejemplo de la tabla de multiplicar del 5:

x = 0; // Inicialización variable
while (x < 10) {
    document.write("5 X " + i + "= " + i*5 + "<br>");
    x++; // Actualización valor
}

Tanto la inicialización como la actualización son muy importantes, su defecto podría llevar a comportamientos muy extraños del programa o llegar a saturar el procesador.

El resultado del código es exactamente el mismo que con el bucle for, pero la implementación es diferente. Normalmente, como al mostrar la tabla de multiplicar ya sabes que se repetirá 10 veces, no usarás la estructura while, ya que la apropiada en la for. La estructura while la usarás cuando a priori el número de repeticiones lo desconozcas.

Diagrama de flujo de la estructura while:

do … while

La estructura do … while es exactamente igual que la while, es decir, tiene los mismos componentes y su base es la misma, pero se utiliza cuando al menos el ciclo de sentencias se tiene que ejecutar una vez. La estructura natural sería algo así::

haz {
...grupo de acciones...
}mientras se cumpla la (condición);

Traducido a JavaScript es así:

do {
   ...grupo de acciones...
} while (condicion);

Por ejemplo, es útil cuando quieres pedir una serie de datos al usuario y quieres filtrar su entrada. Debes permitir que se ejecute la sentencia de entrada para filtrarla como mínimo una vez.

do { //Filtra el número para que sea positivo
    var numero = prompt("Introduce un número positivo mayor que 0");
    if (numero<=0 || isNaN(numero)) { //Si no es correcto avisamos con un alert
        alert("Valor fuera de Rango, el número tiene que ser realmente un número y ser mayor que 0");    }
}while (numero<=0 || isNaN(numero)); //Repetimos la petición del número si ha habido algún error de escritura

En este código añado una función que comprueba que el número introducido sea un realmente un número isNaN. La función isNaN determina si el valor devuelto es NaN (acrónimo de Not a Number) o no. Por lo tanto, si el valor introducido no es un número, el programa pedirá continuamente que si inserte uno.

Nota: Aunque cuando se introduce texto por el usuario siempre se recibe una cadena de texto, al compararlo con la función isNaN, la función intenta cambiar el valor de por ejemplo ‘5’ a el número 5 y el resultado es positivo. Cuando el valor introducido es por ejemplo la letra ‘p’, la función intenta buscar su valor número y falla, por lo que el resultado devuelto por la función será NaN (no es un número).

El diagrama de flujo de la estructura iterativa do ... while es la siguiente:

Si te ha gustado o te ha aclarado conceptos el contenido de este articulo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!