Control de flujo

Introducción

Hasta este momento hemos aprendido a declarar variables, trabajar con distintos tipos de datos, utilizar operadores y realizar conversiones de tipos. Sin embargo, un programa útil no ejecuta siempre las mismas instrucciones: debe ser capaz de tomar decisiones en función de determinadas condiciones.

Las estructuras de control permiten modificar el flujo de ejecución del programa, ejecutando unas instrucciones u otras según se cumpla una condición.

JavaScript dispone de las mismas estructuras de control básicas que otros lenguajes de programación imperativos, como Java, por lo que la mayoría de ellas ya deberían resultar familiares. En este capítulo nos centraremos en su sintaxis en JavaScript y en algunas particularidades del lenguaje.

La sentencia if

La sentencia if permite ejecutar un bloque de código únicamente cuando una condición es verdadera.

Sintaxis

if (condition) {
  // Statements executed if the condition is true.
}

La condición debe ser una expresión cuyo resultado pueda evaluarse como verdadero o falso.

const age = 20;

if (age >= 18) {
  console.log("Adult");
}

Aunque cualquier valor puede evaluarse en un contexto booleano, es recomendable que las condiciones sean expresiones que devuelvan explícitamente true o false, ya que el código resulta más legible y reduce la posibilidad de errores.

INFO

En capítulos anteriores ya se explicó cómo JavaScript interpreta los valores truthy y falsy. Siempre que sea posible, escribe condiciones explícitas para mejorar la claridad del código.

La cláusula else

La cláusula else permite ejecutar un bloque alternativo cuando la condición no se cumple.

const age = 16;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

Solo uno de los dos bloques se ejecutará.

La cláusula else if

Cuando existen varias condiciones excluyentes, pueden encadenarse mediante else if.

const score = 82;

if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else if (score >= 50) {
  console.log("C");
} else {
  console.log("D");
}

Las condiciones se evalúan de arriba hacia abajo. En cuanto una de ellas resulta verdadera, el resto dejan de evaluarse.

Condiciones compuestas

Es frecuente combinar varias condiciones mediante operadores lógicos.

const age = 22;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Access granted");
}

const isWeekend = false;
const isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("Day off");
}

En estos casos conviene utilizar paréntesis cuando la expresión sea compleja, incluso aunque no sean estrictamente necesarios. Esto mejora la legibilidad del código.

TIP

Utiliza siempre los operadores de igualdad estricta (=== y !==) en lugar de == y !=, salvo que exista un motivo concreto para permitir la conversión implícita de tipos.

La sentencia switch

Cuando una variable puede tomar uno de varios valores concretos, una cadena de sentencias if...else if puede resultar difícil de leer. En estas situaciones, switch ofrece una alternativa más clara.

Sintaxis

Un bloque switch evalúa una expresión y compara su resultado con los distintos casos definidos mediante la palabra clave case.

switch (expression) {
  case value1:
    // Statements
    break;

  case value2:
    // Statements
    break;

  default:
  // Statements
}

El siguiente ejemplo muestra cómo ejecutar una acción distinta según el día de la semana.

const day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start working");
    break;

  case "Friday":
    console.log("Weekend is coming");
    break;

  default:
    console.log("Regular day");
}

La sentencia break

Por defecto, una vez encontrado un caso válido, JavaScript continúa ejecutando las instrucciones de los casos siguientes hasta encontrar un break o finalizar el bloque switch.

const option = 1;

switch (option) {
  case 1:
    console.log("One");

  case 2:
    console.log("Two");

  default:
    console.log("End");
}

La salida será:

One
Two
End

Para evitar este comportamiento es habitual finalizar cada caso con una sentencia break.

switch (option) {
  case 1:
    console.log("One");
    break;

  case 2:
    console.log("Two");
    break;

  default:
    console.log("End");
}

La cláusula default

La cláusula default se ejecuta cuando ninguno de los casos anteriores coincide con el valor de la expresión.

const language = "Python";

switch (language) {
  case "JavaScript":
    console.log("Supported");
    break;

  case "Java":
    console.log("Supported");
    break;

  default:
    console.log("Unsupported language");
}

Aunque suele colocarse al final del bloque, default puede aparecer en cualquier posición. No obstante, situarlo al final mejora la legibilidad del código.

Agrupar varios casos

Es posible ejecutar el mismo bloque de instrucciones para varios valores.

const month = 7;

switch (month) {
  case 6:
  case 7:
  case 8:
    console.log("Summer");
    break;

  default:
    console.log("Other season");
}

Esta técnica evita duplicar código y resulta especialmente útil cuando varios casos deben producir exactamente el mismo comportamiento.

TIP

A diferencia de otros lenguajes, JavaScript utiliza una comparación estricta (===) entre la expresión evaluada y cada uno de los valores definidos mediante case. Por tanto, el tipo de dato también debe coincidir.

El operador ternario

El operador ternario permite elegir entre dos valores en función de una condición. Constituye una alternativa compacta a una sentencia if...else sencilla.

Sintaxis

condition ? expressionIfTrue : expressionIfFalse;

Por ejemplo:

const age = 20;

const message = age >= 18 ? "Adult" : "Minor";

console.log(message);

El ejemplo anterior es equivalente a:

let message;

if (age >= 18) {
  message = "Adult";
} else {
  message = "Minor";
}

¿Cuándo utilizarlo?

El operador ternario resulta especialmente útil para inicializar variables o devolver un valor dependiendo de una condición sencilla.

const score = 75;

const result = score >= 50 ? "Passed" : "Failed";

Sin embargo, cuando la lógica comienza a ser compleja, una sentencia if...else suele ser mucho más legible.

// Less readable
const grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "D";

En estos casos es preferible utilizar una cadena de sentencias if...else if.

Buenas prácticas

• Utiliza if cuando las condiciones sean complejas o impliquen distintos operadores lógicos.
• Utiliza switch cuando una misma expresión pueda tomar varios valores concretos.
• Emplea el operador ternario únicamente para decisiones sencillas que produzcan un único valor.
• Utiliza siempre === y !== para realizar comparaciones.
• Añade llaves ({}) incluso cuando el bloque contenga una única instrucción. Esto facilita el mantenimiento del código y evita errores al añadir nuevas sentencias.

Resumen

• La sentencia if ejecuta un bloque de código cuando una condición es verdadera.
• else y else if permiten definir caminos alternativos.
• switch resulta útil cuando una expresión puede tomar varios valores concretos.
• La sentencia break evita que la ejecución continúe en los casos siguientes.
• default define el comportamiento por defecto de un bloque switch.
• El operador ternario permite escribir decisiones simples de forma más concisa.
• La claridad del código debe prevalecer siempre sobre escribir menos líneas.