Blog
JavaScript tiene varios métodos para ejecutar el mismo bloque de código repetidas veces. Son muy útiles para manejar los arreglos y validar formularios. Veamos en qué consisten.
For
For es la instrucción de bucles más completa porque en una sola línea de código es posible controlar todo su funcionamiento.
for(contador; condición; incremento_del_contador){ // Sentencia }
-
Explicación de expresiones:
Contador: es una variable que indica las veces que ha sido ejecutado el bucle.
Condición: es la expresión que debe ser evaluada para dar paso a la ejecución de la sentencia. Si el valor es verdadero se ejecuta, pero si es falso el ciclo finaliza.
Incrementador_del_contador: es un parámetro que se ejecuta al final de cada repetición, sumando o restando una unidad al contador según sea la necesidad.
-
Como funciona
Para comprender su funcionamiento, supongamos que tenemos un array de nombres y queremos mostrarlos todos en pantalla.
var nombres = [‘Ana’, ‘Juan’, ’Camila’, ’Felicia’, ’Jose’, ’Carla’, ’Nestor’, ’Luna’, ’Kelvin’, ’Yenny’]; for(var i=0; i<10; i++){ console.log (nombres[i]); }
Primero se inicializa la variable ‘i’ para que comience desde el 0 (Aunque por lo general se empieza en cero, este valor puede variar dependiendo del caso).
Luego se evalúa la condición. ¿El valor de ‘i’ es menor a 10? Como ya hemos dicho, por el momento ‘i’ vale 0, de manera que si cumple la condición, así que procede a ejecutar la sentencia. Es decir, muestra el nombre del arreglo que se encuentra en la posición 0 – Ana.
Después el valor de ‘i’ es incrementado a uno y se repite la operación nuevamente hasta que la condición ya no se cumpla.
Por ejemplo, cuando ‘i’ llegue a valer 10, se vuelve hacer la pregunta, ¿El valor de ‘i’ es menor a 10? Como resulta que 10 no es menor a 10, se interrumpe la ejecución del ciclo y allí finaliza el for.
do while
La palabra while en español significa “mientras”, por lo tanto, las sentencias dentro de la estructura se ejecutarán mientras la condición se cumpla.
Inicialización de variable do{ // Sentencia; i++; } while (condicion);
-
Explicación de expresiones:
Inicialización de variable: antes de comenzar el bucle, es necesario establecer un valor inicial a la variable que determinará las veces que se repetirá.
Condición: Como ya mencionamos antes, es la expresión que será evaluada. En este caso se repetirá la sentencia siempre que la condición sea verdadera.
Incrementador_del_contador: la variable que hemos inicializado ser irá actualizando después de cada sentencia. No es exclusivo del bucle, pero es muy utilizado cuando necesitamos que la sentencia se repita por determinada cantidad de veces.
-
Como funciona
El ejemplo utilizado para el bucle for, también puede llevarse a cabo con do… while. Veamos,
var nombres = [‘Ana’, ‘Juan’, ’Camila’, ’Felicia’, ’Jose’, ’Carla’, ’Nestor’, ’Luna’, ’Kelvin’, ’Yenny’]; var i = 0; do{ console.log (nombres[i]); i++; } while( i<10);
Como podemos notar, antes del bucle se inicializa la variable en cero y a diferencia del for, este bucle primero realiza la sentencia y después evalúa la condición. De modo que, sin importar la condición, la sentencia se ejecutará al menos una vez.
Lo siguiente que sucede es el incremento de la variable, que como ya hemos aclarado, no es exclusivo del bucle; pues habrá programas en los que es preciso usar acumuladores o incluso preguntar al usuario si desea repetir la instrucción.
Por último, se evalúa la condición y únicamente se detendrá la ejecución cuando la condición resulte falsa, para el ejemplo sería cuando i valga 10.
While
Es similar al do…while, sólo que este bucle valida la condición antes entrar.
Inicialización de variable while (condicion){ // Sentencia; acumulador = acumulador + valor; }
-
Explicación de expresiones:
Posee las mismas expresiones do…while, en diferente orden, pero se comportan de la misma forma. Sin embargo, hacemos bien en mencionar que en ambas podemos usar tanto contadores como acumuladores. Para este bucle utilizamos acumuladores a fin de visualizar su utilidad y funcionamiento.
-
Como funciona
Utilizando el ejemplo que venimos exponiendo, el código sería:
var nombres = [‘Ana’,‘Juan’, ’Camila’, ’Felicia’, ’Jose’, ’Carla’, ’Nestor’, ’Luna’, ’Kelvin’, ’Yenny’]; var acum=0; while(acum < 10){ console.log (nombres[acum]); acum=acum+3; }
Lo primero es la inicialización de la variable que hayamos determinado usar.
Luego el bucle evalúa la condición para saber si se ejecutará o no la sentencia.
Muestra el nombre según el valor de la variable.
Y, por último, se actualiza la variable. En este particular hemos utilizado un acumulador. Esta variable lo que hace sencillamente es ir sumando cierta cantidad al valor que tenía inicialmente y así lo hará sucesivamente a medida que vaya ejecutándose el código.
En vista de que la variable acum comenzó por cero, mostrará el primer nombre del array “Ana”.
Seguidamente la variable acum se actualizará a 3, así que el siguiente nombre a mostrar será “Felicia”.
Posteriormente “Nestor” y finalizará con “Yenny”, pues además de que el array llegó a su final, la variable acum terminará valiendo 12, lo que significa que ya no cumple con la condición.
Las estructuras repetitivas facilitan mucho la escritura de código y son muy versátiles, es posible adaptarlas a cualquier tipo de programa que estemos realizando.