Aunque podemos realizar programas como una secuencia de instrucciones, estos estarían muy limitados y sin poder realizar tares complejas. Para que nuestros scripts puedan realizar comparaciones de valores, recorrer arrays, sumar valores de un array… son necesarias las estructuras de control de flujo en Javascript.

Estas estructuras deben de ser conocidas por cualquier programador, ya que son muy similares en todos los lenguajes de programación y vienen a significar:

Si se cumple esta condición, hazlo. Si no se cumple, haz esto otro

o

Repite esto mientras se cumpla esta condición

Estas son las dos ordenes básicas de las estructuras de control de flujo, pero dependiendo de como, que y cuando queremos que lo haga se utilizaran unas u otras…

if

Es una de las estructuras más comunes en la programación de JS y se emplea para tomar decisiones en función de una condición, de la siguiente forma:

if(condicion){
	//código
}

Si la condición se cumple, se ejecutan las instrucciones del código entre las llaves, en caso contrario ese código se salta y se sigue ejecutando el script.

Para poder determinar la condición se deben de usar los operadores de comparación y los lógicos …

Operadores de comparación o relacionales

Son los mismos que aquellos que se utilizan en matemáticas…

Hay que tener cuidado en no confundir == con =, el primero significa igual y el segundo asignacióm.

Lógicos

Son imprescindibles para realizar operaciones complejas y devuelven como resultado un valor booleano.

Negación

Es uno de los más utilizados y sirve para obtener el valor contrario al de una variable.

La negación lógica se obtiene añadiendo el símbolo ! al identificador de la variable, esto provoca que el booleano de la variable cambie su valor, algo muy sencillo cuando hablamos de trues y falses, pero hay varios casos que se deben de estudiar a parte ya que su valor booleano depende de su valor real:

• Si la variable contiene un numero, esta se transforma en false si vale 0 y en true para cualquier otro caso
• Si la variable es un cadena, será false si es una cadena vacía «» true en todos los demás.

AND

AND se encarga de añadir condiciones extras a la condición de nuestra estructura de control, solicitando que se cumplan las ambos lados del AND que se representa por el signo && por ejemplo:

var x = 5;
var y = 10;

if (x < y && y % x == 0){
	alert('Se cumplen ambas condiciones');
}

En este caso se esta pidiendo como condición que x sea menor que y Y que el módulo de y entre x sea cero.

OR

OR que significa o combina también condiciones, pero en este caso solo es necesario que se cumpla una de las condiciones que impone no las dos. Su símbolo es || y funciona de la siguiente forma:

var x = 5;
var y = 10;

if (x < y || y % x != 0){
	alert('Se cumplen ambas condiciones');
}

En este caso se ha impuesto que o bien x es menor que y o bien que que el módulo de y entre x sea cero, por lo que al cumplirse solo una de las condiciones es suficiente como para entrar en el if.

Naturalmente las condiciones pueden complicarse mucho más, sobre todo cuando se mezclan AND y OR en una misma sentencia.

if … else

En muchas ocasiones nuestra lógica puede ser:

Si se cumple esta condición haz esto. Si no se cumple haz esto otro

Este el significado del if else que se puede representar como:

if (condición){
	//código del if
}else{
	//código del else
}

Lo que viene a significar que si se cumple la condición se ejecute el código del if, de lo contrario se ejecuta el código del else.

Veamos un ejemplo:

var edad = 19;

if (edad => 18){
	alert('eres mayor de edad');
}else{
	alert('eres menor de edad');
}

De esta forma pueden concatenarse varios if else seguidos…

if (condición 1){
	//...
}else if(condición 2){
	//..
}else if(condicion 3){
	//..
}else{
	
} 

for

For nos permite realizar repeticiones (bucles) de una forma sencilla…

for (inicialización; condición; actualización){
	//código que se repite
}

Su lógica de funcionamiento es:

mientras la condición se cumpla, repite la ejecución del código y después de cada repetición actualiza el valor de las variables que se utilizan en la condición y compáralas.

De este modo podemos observar tres zonas bien definidas:

• inicialización: es la zona en la que se establecen los valores iniciales que controlan la repetición
• condición: es la condicion que se debe de cumplir para que se realize la repetición
• actualización: es el nuevo valor asignado a las variables que controlan las repeticiones después de cada una de estas.

En el siguiente ejemplo vemos como sería un bucle for:

for (var i=0; i<5; i++){
	alert('Hola Mundo!!');
}

De esta forma se nos puede ocurrir una forma de recorrer un array, aunque para ello deberíamos saber la longitud del array o bien usar funciones que nos permiten obtener su longitud.

Por ejemplo podríamos hacer algo así:

var alumnos=["Paco", "Pepe", "Laura", "Inma"];

for (var i=0; i<=3; i++){
	alert(alumnos[i]);
}

Pero esta forma no es la más correcta de hacerlo (ni tan siquiera obteniendo la longitud del array), para ello existe otro tipo de for que vemos a continuación…

for…in

Esta estructura de control esta diseñada para utilizarse con objetos o con arrays que es como la vamos a estudiar en esta entrada. De hecho no necesitamos ni recoger ni saber la longitud de nuestro array ya que la filosofia de for…in es:

Haz esto una vez por cada elemento que tengas en el array

Y su sintaxis sería:

for(indice in array){
	//codigo
}

Ahora veremos el ejemplo del for pero con for..in

var alumnos=["Paco", "Pepe", "Laura", "Inma"];

for (i in alumnos){
	alert(alumnos[i]);
}

Como vemos se crea un indice (en nuestro caso i) que recorre todo el array alumnos, no importa que este cambie de tamaño o se mantenga igual, haciéndolo indudablemente mucho más interesante cuando nos vemos obligados a recorrer arrays.

De momento vamos a ver hasta aquí en la próxima entrada terminaremos de ver las estructuras de control de flujo ya estaremos listos para empezar a trabajar con funciones y ha hacer scripts que vayan siendo cada vez más potentes.