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
Tabla de contenidos
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.
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!
Deja una respuesta