Estructuras de control

Cuando escribimos código Javascript, por defecto, el navegador leerá el script de forma secuencial, es decir, una línea detrás de otra, desde arriba hacia abajo. Por lo tanto, una acción que realicemos en la línea 5 nunca ocurrirá antes que una que aparece en la línea 3. Ya veremos que más adelante esto se complica, pero en principio partimos de esa base.

Condicionales

Al hacer un programa necesitaremos establecer condiciones o decisiones, donde buscamos que el navegador realice una acción A si se cumple una condición o una acción B si no se cumple. Este es el primer tipo de estructuras de control que encontraremos. Para ello existen varias estructuras de control:

Estructura de control Descripción
If Condición simple
If/else Condición con alternativa
?: Operador ternario (If/else abreviado)
Switch Estructura para casos específicos

Condicional If

Quizás, el más conocido de estos mecanismos de estructura de control es el if (condicional). Con él podemos indicar en el programa que se tome un camino sólo si se cumple la condición que establezcamos:

var nota = 7;
console.log('He realizado mi examen.');

// Condición (si nota es mayor o igual a 5)
if (nota >= 5) {
  console.log('¡Estoy aprobado!');
}

En este caso, como el valor de nota es superior a 5, nos aparecerá en la consola el mensaje «¡Estoy aprobado!». Sin embargo, si modificamos en la primera línea el valor de nota a un valor inferior a 5, no nos aparecerá ese mensaje.

Cuando dentro de las llaves ({ }) sólo tenemos una línea, se pueden omitir dichas llaves. Aún así, es recomendable ponerlas siempre si tenemos dudas o no estamos seguros.

Condicional If / else

Pero se puede dar el caso que queramos establecer una alternativa a una condición. Para eso utilizamos el if seguido de un else. Con esto podemos establecer una acción A si se cumple la condición, y una acción B si no se cumple.

Vamos a modificar el ejemplo anterior para mostrar también un mensaje cuando estamos suspendidos, pero en este caso, en lugar de mostrar el mensaje directamente con un console.log vamos a guardar ese texto en una nueva variable calificacion:

var nota = 7;
console.log('He realizado mi examen. Mi resultado es el siguiente:');

// Condición
if (nota < 5) {
  // Acción A (nota es menor que 5)
  calificacion = 'suspendido';
} else {
  // Acción B: Cualquier otro caso a A (nota es mayor o igual que 5)
  calificacion = 'aprobado';
}

console.log('Estoy', calificacion);

Nuevamente, en este ejemplo comprobaremos que podemos conseguir que se muestre el mensaje Estoy aprobado o Estoy suspendido dependiendo del valor que tenga la variable nota. La diferencia con el ejemplo anterior es que creamos una nueva variable que contendrá un valor determinado dependiendo de la condición del If.

Por último, el console.log del final, muestra el contenido de la variable calificacion, independientemente de que sea el primer caso o el segundo.

var nota = 7;
console.log('He realizado mi examen. Mi resultado es el siguiente:');

// Condición
if (nota < 5) {
  // Acción A (nota es menor que 5)
  calificacion = 'suspendido';
}
if (nota >= 5) {
  // Acción B (nota es mayor o igual que 5)
  calificacion = 'aprobado';
}

console.log('Estoy', calificacion);

Este nuevo ejemplo, es equivalente al ejemplo anterior. Si nos fijamos bien, la única diferencia respecto al anterior es que estamos realizando dos if independientes: uno para comprobar si está suspendido y otro para comprobar si está aprobado.

Pero aunque son equivalentes, no son exactamente iguales, ya que en el ejemplo que vimos anteriormente sólo existe un if, y por lo tanto, sólo se realiza una comprobación. En este ejemplo que vemos ahora, se realizan dos if, y por lo tanto, dos comprobaciones.

En este caso se trata de algo insignificante, pero es importante darse cuenta de que el primer ejemplo estaría realizando menos tareas para conseguir un mismo resultado, ergo, el primer ejemplo sería más eficiente.

Operador ternario

El operador ternario es una alternativa de condicional if/else de una forma mucho más corta y, en muchos casos, más legible. Vamos a reescribir el ejemplo anterior utilizando este operador:

var nota = 7;
console.log('He realizado mi examen. Mi resultado es el siguiente:');

// Operador ternario: (condición ? verdadero : falso)
var calificacion = nota < 5 ? 'suspendido' : 'aprobado';

console.log('Estoy', calificacion);

Este ejemplo hace exactamente lo mismo que el ejemplo anterior. La idea del operador ternario es que podemos condensar mucho código y tener un if en una sola línea. Obviamente, es una opción que sólo se recomienda utilizar cuando son if muy pequeños.

Condicional If múltiple

Es posible que necesitemos crear un condicional múltiple con más de 2 condiciones, por ejemplo, para establecer la calificación específica. Para ello, podemos anidar varios if/else uno dentro de otro, de la siguiente forma:

var nota = 7;
console.log('He realizado mi examen.');

// Condición
if (nota < 5) {
  calificacion = 'Insuficiente';
} else if (nota < 6) {
  calificación = 'Suficiente';
} else if (nota < 8) {
  calificacion = 'Bien';
} else if (nota <= 9) {
  calificacion = 'Notable';
} else {
  calificacion = 'Sobresaliente';
}

console.log('He obtenido un', calificacion);

Sin embargo, anidar de esta forma varios if suele ser muy poco legible y produce un código algo feo. En algunos casos se podría utilizar otra estructura de control llamada switch, que puede ser útil en ciertos casos.

Condicional Switch

La estructura de control switch permite definir casos específicos a realizar en el caso de que la variable expuesta como condición sea igual a los valores que se especifican a continuación mediante los case. No obstante, hay varias puntualizaciones que aclarar sobre este ejemplo:

var nota = 7;
console.log('He realizado mi examen. Mi resultado es el siguiente:');

// Nota: Este ejemplo NO es equivalente al ejemplo anterior (leer abajo)
switch (nota) {
  case 10:
    calificacion = 'Insuficiente';
    break;
  case 9:
  case 8:
    calificacion = 'Notable';
    break;
  case 7:
  case 6:
    calificacion = 'Bien';
    break;
  case 5:
    calificacion = 'Suficiente';
    break;
  case 4:
  case 3:
  case 2:
  case 1:
  case 0:
    calificacion = 'Insuficiente';
    break;
  default:  // Cualquier otro caso
    calificacion = 'Nota errónea';
    break;
}

console.log('He obtenido un', calificacion);

En primer lugar, el ejemplo anterior no es exactamente equivalente al anterior. Este ejemplo funcionaría si sólo permitimos notas que sean números enteros, es decir, números del 0 al 10, sin decimales. En el caso de que nota tuviera por ejemplo, el valor 7.5, mostraría Nota errónea.

El ejemplo de los if múltiples si controla casos de números decimales porque establecemos comparaciones de rangos con mayor o menor, cosa que con el switch no se puede hacer. El switch está indicado para utilizar sólo con casos con valores concretos y específicos.

En segundo lugar, observa que al final de cada caso es necesario indicar un break para salir del switch. En el caso que no sea haga, el programa saltará al siguiente caso, aunque no se cumpla la condición específica.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.