Estructuras de control de flujo en JavaScript (II)
Continuamos con las estructuras del control de flujo que dejamos a medias en la anterior entrada debido a la extensión que nos estaba ocupando el tema. Hoy veremos como funcionan los bucles while, do…while, los switchs y las sentencias break y continue de modo que empecemos con la materia…
while
La estructura while crea bucles que se van a ejecutar ninguna o más veces, algo extraño ¿verdad?. Bueno lo que viene a decir un bucle while es lo siguiente:
repite esto siempre que se cumpla esta condición, pero antes de empezar mira la condición…
y su expresión será algo parecido a esto:
while(condicion){ //codigo }
De este modo si la condicion no se cumple el código nunca se ejecuta, pero si se cumple se ejecutará al menos una vez, ya que cuando se recorre el bucle se vuelve a observar la condición para saber si se reejecuta el código o se salta el bucle.
Las variables que se comparan en el bucle while se deben de modificar en el propio código del bucle.
Pero veamos un ejemplo de todo esto:
var resultado = 0; var contador = 6; while (contador > 0){ resultado += contador; contador--; } alert(resultado);
Aquí vemos como la condición impuesta es que contados sea mayor que cero y a cada vuelta se suma el valor de contador al resultado y se le resta uno al contador.
Cuando el contador llega a cero el hilo de nuestro script salta el código de nuestro bucle y sigue ejecutando el programa, en este caso un alert que muestra el resultado.
nota: aunque en principio sea indiferente usar while o for para obtener los mismos resultados, su uso depende de muchos otros factores que se van viendo cuando se entra en programación de manera más profunda.
do…while
Este tipo de bucle es similar al while, pero tiene varias diferencias, ya que siempre se ejecuta al menos una vez. Esto es debido a que tiene la comparación al final y no al principio. Su definicición sería:
Haz esto, y si se cumple la condición, vuelve a hacerlo hasta que deje de cumplirse
Y su expresión sería:
do{ //codigo }while(condicion);
De esta manera haciendo el mismo ejemplo que en bucle while nos quedaría de la siguiente forma:
var resultado = 0; var contador = 6; do{ resultado += contador; contador--; }while(contador > 0); alert(resultado);
Vemos que el bucle funciona de manera muy similar, aunque el hilo entra en él sin mirar condiciones y empezando a comparar una vez se ha ejecutado el código la menos una vez y ejecutandose mientras se cumpla la condición.
Para ver la diferencia entre estos dos bucles, vamos a observar como son sus diagramas para poder diferenciarlos mejor:
break & continue
Vamos a analizar ahora las sentencias break y continue, con ellas podemos manipular y modificar el comportamiento normal de un bucle para saltarse repeticiones.
- break permite terminar de forma directa un bucle, cuando una variable toma un valor determinado o se cumple cierta condición.
- continue permite saltarse algunas repeticiones.
Por ejemplo veamos el siguiente ejemplo:
var cadena = "No por mucho madrugar amanece más temprano"; var letras = cadena.split(""); var resultado = ""; for (i in letras){ if(letras[i]=='u'){ break; }else{ resultado += letras[i]; } } alert(resultado);
El resultado que obtenemos es: No por m
Cuando el script pasa por una instrucción break sale del bucle y continua ejecutando el resto de instrucciones del programa.
En este ejemplo comienza a recorrer la secuencia de letras guardándolas en el resultado hasta que encuentra un u, que es cuando se ejecuta el break.
Supongamos que nuestro código fuera el siguiente:
var cadena = "No por mucho madrugar amanece más temprano"; var letras = cadena.split(""); var resultado = ""; for (i in letras){ if(letras[i]=='u'){ continue; }else{ resultado += letras[i]; } } alert(resultado);
Lo único que hemos hecho es cambiar break por continue, lo que nos da como resultado: No por mcho madrgar amanece más temprano
Como vemos cuando se cumple la condición y se ejecuta el continué se pasa a la siguiente iteración, saltandose el resto del código.
Cierto es que en este caso nos es indiferente ya que se si se cumple la condición, el hilo, no entraría en el else, pero si quitamos el else y volvemos a ejecutar:
var cadena = "No por mucho madrugar amanece más temprano"; var letras = cadena.split(""); var resultado = ""; for (i in letras){ if(letras[i]=='u'){ continue; } resultado += letras[i]; } alert(resultado);
Vemos que el nuevo resultado viene a ser mismo que antes (No por mcho madrgar amanece más temprano), mostrandose claramente como funciona continue.
Aunque son dos sentencias muy hay que tener en cuenta que pueden provocar resultados extraños y que no deseamos por lo que no es muy común su uso y debemos de utilizarlos solo cuando sea estrictamente necesario.
switch
Puede darse el caso de que sea necesario encadenar numerosos if…else para hacer comparaciones como por ejemplo la siguiente:
if (dia == "lunes"){ //codigo }else if (dia == "martes"){ //codigo }else if (dia == "miercoles"){ //codigo }else if (dia == "jueves"){ //codigo }else ...
Naturalmente esto funciona correctamente, pero hay que hacer muchas comparaciones y esto puede ser contraproducente para nuestro scripts, por lo que hay una estructura diseñada para manejar las comparaciones sobre una variables, que es la llamada switch.
Su definición normal es la siguiente:
switch(variable){ case valor1: //código break; case valor2: //código break; case valor3: //código break; case valor4: //código break; .... default: //código break; }
Donde la variable es la variable que queremos que sea comparada y valorX es el valor que puede tomar la variable, de modo que una vez que la variable encuentre su valor activa ese código e ignora el resto de los case. Esto se debe al break que se encuentra al final de cada case
En caso de no encontrar ningún valor correcto ejecutará el default como si fuera el else final, en caso de que lo hubiéramos implementado, ya que es totalmente optativo.
Pero hay más ya que podemos agrupar diferentes cases si estos tienen el mismo código.
En el siguiente ejemplo, y siendo ya el último para aprender las estructuras de control de flujo, lo veremos claramente.
switch(dia){ case "lunes": case "martes": case "miercoles": case "jueves": case "viernes": alert("Hoy toca madrugar"); break; case "sabado": case "domingo": alert("Es fin de semana!!!"); break; }
Como vemos la variable para comparar es dia y los casos nos diferencian los distintos días, juntandolos en dos grupos, los laborables y los del fin de semana…
De esta forma se pueden hacer comparaciones encadenadas de forma rápida y sencilla.
Y hasta aquí todas las estructuras de control de flujo, como siempre, espero que os haya gustado y resultado interesante…
There are 5 Comments.