Cargando

Ir a contenido

X

 


Tipos de estructuras de control de flujo en JavaScript

Veremos los diferentes tipos de estructuras de control de flujo. Las comúnmente llamadas estructuras iterativas (Estructura IF / Blucle While / Estructura FOR / Blucle SWITCH) y como se implementan en JavaScript.


Escrito por el dic 04 2015 03:35


Hoy veremos las estructuras de control de flujo, también llamadas simplemente estrcuturas de control o sobre todo estructuras iterativas. Estas instrucciones son muy interesantes y utilizadas ya que evolucionan el concepto de programa a programa inteligente.

 

¿Por qué?

 

Si no usamos las estructuras de control de flujo un programa es simple. Es un programa que en un principio únicamente se sirve de variables y operadores en lo que podemos llamar una sucesión de instrucciones en el tiempo de manera lineal, es decir una después de otra.
Al introducir las estructuras que veremos a continuación nuestro programa deja de ser una mera sucesión lineal de instrucciones poco eficiente para convertirse en un programa que es capaz de tomar decisiones dependiendo del valor de las variables que está manejando, de ahí que se les llame “inteligentes”.

 

Las estructuras iterativas se llaman así porque las instrucciones a realizar se pueden repetir una o muchas veces. Hay una gran variedad de tipos de estructuras iterativas con sus particularidades, sin embargo todas ellas tienen algo en común, tienen un único punto de entrada, es decir se activan al introducir un dato.

 

Ahora veremos los diferentes tipos de estructuras iterativas en JavaScript, aunque en realidad en todos o en casi todos lenguajes de programación existen básicamente las mismas estructuras y cumplen los mismos propósitos, la diferencia es la manera en que están escritos, es decir la sintaxis.

 

Empezaremos por la estructura iterativa que quizá sea la más sencilla y también la más utilizada. Nos referimos a la estructura if.

 

Estructura IF
Digo que es la más sencilla ya que la introducir la información y tras comprobarla lo que hace nuestro programa es que si se cumple la condición preestablecida, ejecutamos la sentencia o sentencias que hayas predefinido en el código. En cambio si dicha condición no se cumple se sale de la estructura y no ejecuta el código que lo acompaña.

 

Un ejemplo con código en Javascript es el siguiente:

If (x)
{
	alert(“El valor es cierto”);
}

Así de simple. Lo único que estamos diciendo es que si la variable que introducimos (x) es cierta, escriba "El valor es cierto" y si no es cierto, que no escriba nada. También se podría expresar con If (x==true) siendo importantísimo no confundir el operador == que compara ambos valores con = que lo que hace es asignar al valor de la izquierda el valor de la derecha.

 

Esta estructura por sí misma es utilizada para validar cualquier tipo de entrada de información de una manera muy recurrente, sin embargo, suele venir acompañada por otra estructura llamada else.
Else se usa como complemento a if ya que si no se cumple la condición que establece if y éste sigue con else, se ejecuta automáticamente la sentencia o las sentencias que vayan asociadas a dicha estructura de control como se puede ver en el siguiente ejemplo:

If(x)
{
	alert(“El valor es cierto”);
}
else
{
	alert(“El valor es falso”);
}

Igual que en el ejemplo anterior, si el dato que se introduce, x, es cierto se escribe “El valor es cierto”. La diferencia con el ejemplo anterior en el que si x no era cierto no hacía nada es que ahora como se va a else, directamente escribe “El valor es falso”.
Esto es muy útil si la información solo puede ser verdadero o falso, blanco o negro, sí o no, o cualquier otra combinación binaria, o una u otra. Sin embargo habitualmente se da el caso en el que queremos saber si los datos que introducimos cumplen alguna de varias condiciones que sean excluyentes, por ejemplo si queremos saber si nuestro jugador es defensa, centrocampista, portero o delantero. Siempre será sólo una de las cuatro cosas y aquí no nos sirve el con if y else.
En este caso podemos valernos de la estructura else if que significa si no. Se pueden usar todas las else if que queramos siempre después de nuestra primera estructura if y antes de la última que será else como podemos ver en el siguiente código:
If(jugador==portero)
{
	alert(“El jugador es portero”);
}
else if(jugador==defensa)
{
	alert(“El jugador es defensa”);
}
else if(jugador== centrocampista)
{
	alert(“El jugador es centrocampista”);
}
else
{
	alert(“El jugador es delantero”);
}

De esta manera el programa primero comprueba si es portero. Si lo es, lo escribe, si no pasa al primer else if para comprobar si es defensa. Si lo es, lo escribe. Si no lo es pasa al siguiente bloque para comprobar si es centrocampista. Si lo es, lo escribe. Si no es ninguna de las tres opciones entra en el último bloque que lo que hace es escribir que es delantero por descarte.

 

Las estructuras que acabamos de ver no terminan de ser eficientes si las comprobaciones son muy repetitivas, en dicho caso se recurre a otras estructuras de control como while o do while for:

 

Bucle WHILE
Esta estructura es la que se conoce como mientras (que es la traducción literal del inglés) en algoritmia. Y como dice su propio significado es un bucle que ejecuta las instrucciones mientras la condición o condiciones sigan siendo ciertas, mientras siga devolviendo “true” como valor.
Por lo tanto la estructura de dicho bucle es muy sencilla:
while(condición)
{
instrucciones;
}

Un ejemplo sencillo en JavaScript puede ser el siguiente:
var contador=1;
while(num<5)
{
    alert(“num”);
    num+=1;
}
Esto es tan sencillo como ir sumando uno cada vez a nuestra variable num hasta que llegue a 5.
¿Qué pasa si antes de entrar al bucle no se cumple la condición?

 

Que nunca se ejecutará el bucle. Y aquí llegamos a un tipo especial del bucle while llamado do while. Dicha estructura se utiliza si queremos que el programa entre al bucle una vez al menos. La traducción literal es haz ... mientras de ahí que al menos una vez haga, entre al bucle.

 

¿Por qué siempre entra al menos una vez en nuestro bucle?

 

Porque como veremos a continuación la condición para ejecutar el bucle se realiza después de hacerlo. Puede sonar complicado pero veremos que es muy simple:

var fact=1;
var num=10;
do{
     fact= num*fact;
     num--;
}while (num>0);
alert(num);
Sería el ejemplo.

 

¿Qué pasa en este ejemplo?

 

Que primeramente entra al bucle y hace dos instrucciones, la multiplicación del resultado por el número y después decrementa el número. Este proceso lo repite hasta que nuestro número sea 1. Al salir del bucle escribe el número que inicialmente era 10 y que ahora es 1.
Este bucle se podría escribir entonces exactamente igual con while. En cambio si en la inicialización var num=0; entra en el bucle, hace las instrucciones y num se queda con el valor -1, cosa que no pasaría con while ya que no entraría en el bucle, y de esta manera lo ha hecho una vez.
Obviamente este es un ejemplo muy sencillo y con poca utilidad, pero a la hora de programar es muy interesante si queremos que se muestre un menú al menos una vez.

 

Después de ver el bucle while y do while vamos a ver el que creo es el más utilizado en programación. Estamos hablando del famoso bucle for.

 

Estructura FOR
Es bucle más utilizado por su eficacia aunque sea más complejo que las estructuras iterativas anteriores.
Tiene la siguiente forma:

 

for( orden de inicialización; condición; orden de actualización)
{
Instrucciones a ejecutar
}

Y su funcionamiento es muy sencillo:
En la primera parte del bucle se inicializa una o varias variables, es decir, se les da valor. Después del primer punto y coma se define la condición que se debe cumplir para ejecutar las instrucciones. Y la última parte del paréntesis, la actualización, es el valor que se asignará a las variables que se hayan inicializado.
Muy sencillo, mientras la condición que se indique se cumpla, las instrucciones que haya dentro del bucle for se ejecutan. Después de ejecutarlo actualizamos el valor de las variables que se usan en la condición.
Ahora vamos a ver un ejemplo escrito en Javascript:

for(i=0;i<10;i++)
{
	alert(“Aun es menor que 10”);
}

Hemos creado e inicializado la variable i con el valor 0. Es importante tener en cuenta que esta parte del bucle sólo se ejecuta la primera vez, el resto de veces no lo tiene en cuenta ya que solo se inicializa una vez. Nuestra zona de condición es mientras i sea menor que 10, y por tanto nuestro bucle se repetirá hasta que i deje de ser menor que 10.
Ahora es cuando entra en juego la zona de actualización. Si no cambiase el valor de i, como lo hemos inicializado en 0 se convertiría en un bucle infinito.
En nuestra zona de actualización cambiamos el valor de nuestra variable. En el caso del ejemplo cada vez que se ejecuta el bucle el valor de i se incrementa en 1, pero también podrían ponerse otras instrucciones como multiplicaciones, restas, etc.

 

El bucle for tiene muchísima utilidad en el mundo de la progamación, y aunque menos común hay un caso especial llamado for in. Aunque éste se suele utilizar en programación de objetos ya bastante avanzada, es interesante el uso que se puede hacer en arrays.
El bucle for in lo que hace es recorrer un array pasando por todos sus elementos de manera eficiente. Definido un array el código es el siguiente:

var array=[“Primero”,”Segundo”,”Tercero”,”Cuarto”];

for (i in arrays)
{
	alert(“Curso:  array(i)”);
}

Va escribiendo todos los cursos disponibles del primero al cuarto.

 

Por último hablaremos de otra de las estructuras de control de flujo que más se utilizan que se trata del bucle switch, que significa elegir en inglés.

 

Bucle SWITCH
Dicha estructura la utilizamos casi siempre que queremos realizar un menú con sus diferentes opciones. Es una especie de optimización de la repetición de los bucles else if que vimos antes y que funciona mucho mejor y sin ser redundante. Lo utilizamos para aquellas veces que queremos hacer comprobaciones múltiples de una misma variables, es decir, para elegir una característica sobre una variable que la excluye de poseer otra.

 

La forma de switch es la siguiente:

switch(letra)
{
	case a:
		instrucciones;
		break;
	case b:
		instrucciones;
		break;
	case c:
		instrucciones;
		break;
	case d:
		instrucciones;
		break;
	default:
		instrucciones;
		break;
}

Al bucle anterior se le pasa una variable, en este caso letra. Comprueba dicha variable y dependiendo de cuál sea entra y realiza unas u otras instrucciones y después se sale del bucle. Para entrar a cada una de las opciones disponibles de nuestra variable letra se usa la palabra reservada case. La salida del bucle se realiza mediante la palabra reservada break, que se trata de una instrucción de salto, la cual interrumpe o modifica el flujo del programa, forzando en este caso la salida del bucle antes de tiempo. Sin embargo no es obligatorio introducir esta palabra.

 

De esta manera no cortaríamos el flujo del programa y comprobaría el resto de opciones (que sabemos que no serán ciertas) por lo que será menos óptimo. Es muy importante tener en cuenta que las comprobaciones se hacen en orden, por lo tanto si sabemos qué opción o opciones se van a usar más es mejor que las coloquemos en primer lugar.
El valor default que vemos en el código es el que se utiliza si el valor introducido no coincide con ningún case. En ese caso salta al default automáticamente. Sin embargo tampoco es obligatorio incluir default en nuestro código.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
8
VOTA
5
0%
4
100%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 04 2015 03:35
  •   Actualizado dic 04 2015 14:07
  •   Visitas 1.2K
  •   Nivel
    Avanzado