Estructuras de control de flujo en Javascript

¿Qué tal chicos?, aquí estoy de nuevo para daros caña. Después de haber aprendido qué es Javascript, la programación básica parte 1 y la programación básica parte 2, hoy hablaremos de las estructuras de control de flujo en Javascript. Os aseguro que os va a gustar, y lo voy a hacer de la forma más amena posible. Así que, empezamos 🙂

¿Qué son las estructuras de control de flujo? Podríamos decir que son instrucciones del tipo “si se cumple esta condición hazlo; sino se cumple, haz esto otro”. También tenemos instrucciones del tipo “repite esto mientras se cumpla esta condición”.

Si empezamos a utilizar las estructuras de control de flujo, los programas dejan de ser una sucesión lineal para convertirse en programas inteligentes que pueden tomar decisiones en función del valor de las variables.

De la primera que vamos a hablar es de la estructura if, ya que es la más utilizada en Javascript y en la mayoría de lenguajes de programación. La vamos a emplear para tomar decisiones en función de una condición.

if (condicion) {

}

Si la condición se cumple (es decir, si su valor es true) se va a ejecutar todas las instrucciones que se encuentran dentro de {…}. Pero si por el contrario, la condición no se cumple (es decir, si su valor es false) no se va a ejecutar ninguna instrucción que tengamos contenida en {…} y el programa continua ejecutando el resto de instrucciones del script. Veamos un ejemplo para que quede mucho más claro:

var mostrarMensaje = true;

if (mostrarMensaje) {

alert (“Hola Mundo”);

}

En este ejemplo, el mensaje se muestra al usuario ya que la variable mostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del bloque de instrucciones del if. Este ejemplo también podríamos escribirlo como:

var mostrarMensaje = true;

if (mostrarMensaje == true) {

alert (“Hola Mundo”);

}

Aunque en este caso, la condición es una comparación entre el valor de la variable mostrarMensaje y el valor true. Como los dos valores coinciden, podemos decir que la igualdad se cumple y por tanto la condición es cierta, ya que su valor es true y se ejecutan las instrucciones contenidas en ese bloque del if.

Como ya dijimos en su momento, el error que más se comete a la hora de programar es confundir los operadores == (para comparaciones) y = (asigna valor).

var mostrarMensaje = true;

// Se comparan los dos valores

if (mostrarMensaje == false) {

}

// Error  – Se asigna el valor “false a la variable”

if (mostrarMensaje = false) {

}

La condición que controla el if () puede combinar los diferentes operadores lógicos y relacionales que ya hemos visto anteriormente.

var mostrado = false;

if (!mostrado) {

alert (“Es la primera vez que mostramos este mensaje”);

}

Los operadores AND y OR , que también ya hemos hablado de ellos, nos permiten encadenar varias condiciones simples para construir condiciones que sean más complicadas. Un ejemplo para entenderlo:

var mostrado = false;

var usuarioPermiteMensajes = true;

if (!mostrado && usuarioPermiteMensajes) {

alert (“Es la primera vez que mostramos este mensaje”);

}

La estructura if…else podríamos definirla como “si se cumple esta condición, hazlo; si no se cumple, haz esto otro”.

if (condicion) {

}

else {

}

Si la condición se cumple, es decir si su valor es true se ejecutan todas las instrucciones que se encuentran dentro del if (). Pero, si la condición no se cumple, es decir, si su valor es false se ejecutan todas las instrucciones contenidas en else {}. Veamos un ejemplo sencillo, para entender qué quiero decirte:

var edad = 18;

if (edad >=18) {

alert (“Eres mayor de edad”);

}

else {

alert (“Todavía eres menor de edad”);

}

Este ejemplo es muy sencillo. Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición if () se cumple, y por eso se ejecutan las instrucciones y nos muestra el mensaje. Y al revés, cuando no se cumple que eres mayor de 18, nos salta el mensaje todavía eres menor de edad.

Ahora vamos a hacer un ejemplo donde se compara variables de tipo cadena de texto, esto también ya sabéis lo que es la perfección, ¿verdad?:

var nombre = “”;

if (nombre == “”) {

alert (“Aún no has escrito tu nombre”);

}

else {

alert (“Ya tenemos tu nombre. Muchas gracias”);

}

También, la estructura if…else se puede encadenar para realizar varias comprobaciones seguidas:

if (edad >12) {

alert (“Eres un pequeñajo”);

}

else if (edad <19) {

alert (“Eres un adolescente”);

}

else if (edad <35) {

alert (“Aún sigues siendo muy joven”);

}

else {

alert (“Hora de cuidarse y empezar en el gym jejeje”);

}

Añadiré que no es obligatorio que la combinación de estructura if…else acabe con la instrucción else, ya que puede terminar con una instrucción de tipo else if ().

La estructura for nos permite realizar repeticiones, también llamadas bucles de una forma muy sencilla. Definiremos la estructura for como: “mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición”.

for (inicializacion; condicion; actualizacion) {

}

La “inicialización” es la zona en la que se establece los valores iniciales de las variables que controlan la repetición.

La “condición” es el único elemento que decide si continua o se detiene la repetición.

La “actualización” es el nuevo valor que se asigna después de cada repetición a las variables que controlan la repetición.

var mensaje =”Hola, estamos dentro de un bucle”

for (var i=0; i < 5; i++) {

alert (mensaje);

}

La parte de la inicialización del bucle consiste en:

var i = 0;

Con lo que en primer lugar creamos la variable i y le asignamos el valor 0. Esta zona de la inicialización solamente la tenemos en consideración justo antes de comenzar a ejecutar el bucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i<5;

Los bucles se seguirán ejecutando mientras se cumplen las condiciones y se dejan de ejecutar justo después de comprobar que la condición no se cumple. Por lo que, mientras la variable i valga menos de 5 el bucle se va a ejecutar indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es que i sea menor que 5, si no modificamos el valor de i de alguna forma, el bucle se va a repetir indefinidamente.

Por esa razón, es imprescindible indicar la zona de actualización en la que se modifica el valor de las variables que controlan el bucle.

i++

En el siguiente ejemplo, podemos ver que el valor de la variable i se incrementa en una unidad después de cada repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones que incluye el for.

Para entender mejor lo que acabamos de ver, veamos un ejemplo. Recordáis cuando hablábamos de los días de la semana y lo poníamos mediante un array. Podemos rehacerlo de una manera más sencilla que sería:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”, “Domingo”];

for (var i=0; i<7; i++) {

alert (dias [i]);

}

Por último y ya para terminar este artículo, hay que mencionar la estructura for…in. Es un elemento de programación avanzada. Su definición formal adaptada a los arrays es:

for (indice in array) {

}

Pongamos un ejemplo muy sencillo para comprender dicha estructura:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”, “Domingo”];

for (i in dias) {

alert (dias [i]);

}

La variable que se indica como indice es la que se puede utilizar dentro del bucle for…in para acceder a los elementos del array. De esta manera, en la primera repetición del bucle la variable i vale 0 y en la última vale 6.

Usamos esta estructura de control para recorrer arrays, que evita tener que indicar la inicialización y las condiciones del bucle for simple y funciona correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual aunque varíe el número de elementos del array.

Mi querido lector, hasta aquí el artículo de hoy. Recuerda dejarme tus opiniones y sugerencias en los comentarios. Y cualquier consulta que quieras hacerme, o te gustaría que hablara de algo específico en el blog, no dudes en decírmelo.

Nuevamente te doy las gracias por leer hasta el final, y nos vemos muy pronto con otro artículo 🙂

 

¡Te animo a que te suscribas a la Newsletter para estar al tanto de todas las noticias y novedades!

Quiero conocer tu opinión

error: Este contenido esta protegido