Condicionales — else if, el operador ternario y switch

Cuando calculas el nivel de un cliente o muestras el estado de un pedido, casi nunca hay solo dos casos posibles. Si escribes los niveles Platino, Oro y Regular como tres if separados, las condiciones de abajo se siguen evaluando aunque una de arriba ya haya decidido el resultado, y aparece una línea por cada condición que se cumple.

En este artículo verás else if para evaluar condiciones por etapas, el operador ternario, que devuelve directamente un valor, y switch, que compara un valor con varios candidatos.

Tres casos o más — encadenar else if

Vamos a elegir una etiqueta a partir de la puntuación media de las reseñas de un producto. Con 4.5 o más es "Excelente"; con 3.5 o más, "Bueno", y por debajo de eso, "Por debajo de la media".

Dos if separados se evalúan de forma independiente, así que con 4.8 se cumplen las dos condiciones y se imprimen dos líneas: "Excelente" y "Bueno".

Si encadenas else if (una condición adicional que solo se evalúa si la anterior no se cumplió), varias condiciones forman una sola estructura de ramificación. El bloque { } que va detrás de cada condición se llama rama.

Las condiciones se evalúan de arriba abajo y solo se ejecuta la primera rama cuya condición se cumple. Si no se cumple ninguna, se ejecuta la rama else.

const score = 4.8;   // puntuación media de las reseñas de un producto

// Con if separados, cada uno se evalúa por su cuenta
if (score >= 4.5) {
  console.log("Excelente");                // se cumple
}
if (score >= 3.5) {
  console.log("Bueno");                    // también se cumple → 2 líneas
}

// Con else if, la evaluación termina en la primera rama que se cumple
if (score >= 4.5) {
  console.log("Excelente");                // solo se ejecuta esta
} else if (score >= 3.5) {
  console.log("Bueno");                    // no se llega a evaluar
} else {
  console.log("Por debajo de la media");   // no se llega a evaluar
}

else es opcional. Si no lo pones y no se cumple ninguna condición, no se ejecuta ninguna rama y el programa sigue en la línea que viene después de toda la estructura.

La tabla muestra en qué paso se detiene la evaluación cuando pasas tres puntuaciones distintas por la misma cadena.

El orden de las condiciones cambia el resultado

Si pones primero una condición que abarca un rango más amplio, las condiciones más restrictivas que van debajo nunca se alcanzan. Si escribes primero score >= 3.5, un producto con 4.8 se queda en "Bueno". Para que 4.8 sea "Excelente", empieza por la condición más restrictiva, como score >= 4.5.

Convierte el estado de un pedido en un mensaje. orderId, isCanceled, isShipped e isPaid ya están declaradas.

① Imprime una línea con la forma "Estado del pedido A-1001".

② Escribe una rama que imprima "Cancelado" si el pedido está cancelado.

③ Después, añade en este orden una rama que imprima "Enviado" si ya se envió y otra que imprima "Preparando el envío" si ya está pagado.

④ Si no se da ninguno de estos casos, imprime "Pendiente de pago".

(Si se ejecuta correctamente, aparecerá una explicación.)

Obtener el resultado como valor — el operador ternario

A veces quieres elegir entre "Disponible" y "Agotado" según las existencias y guardar ese texto en una variable para reutilizarlo. Con if y else no puedes usar const, porque una const tiene que recibir su valor en el mismo momento en que se declara. En su lugar, declaras la variable con let y le asignas un valor en cada rama.

El código que produce un valor al evaluarse, como stock > 0, se llama expresión. El código que ejecuta acciones sin producir ningún valor, como if (…) { … }, se llama sentencia.

Con el operador ternario (una expresión que recibe tres partes —una condición, un valor para true y otro para false— y devuelve el valor elegido) puedes escribir las dos ramas en una sola línea.

const stock = 0;   // existencias

// if es una sentencia, así que declarar y asignar son pasos separados
let label;
if (stock > 0) {
  label = "Disponible";
} else {
  label = "Agotado";
}
console.log(label);   // Agotado

// El operador ternario es una expresión, así que va directo a una const
const badge = stock > 0 ? "Disponible" : "Agotado";
console.log(badge);   // Agotado

// También funciona dentro de un template literal
console.log(`Estado: ${stock > 0 ? "Puedes comprarlo" : "Pendiente de reposición"}`);  // Estado: Pendiente de reposición

Cuando necesitas tres resultados o más, vuelve a else if. Puedes anidar operadores ternarios, pero entonces ? y : aparecen una y otra vez en la misma línea, como en a ? x : b ? y : z, y tienes que seguir con la vista qué condición corresponde a qué valor.

Imprime un encabezado para las reseñas y los puntos que gana una compra. reviewCount, isPremium y purchaseAmount ya están declaradas.

① Imprime un encabezado que diga "Aún no hay reseñas" cuando haya 0 reseñas y "Reseñas: ◯" cuando haya al menos 1.

② Guarda en una variable la tasa de puntos: 0.03 para los miembros premium y 0.01 para los demás.

③ Multiplica el importe de la compra por la tasa de ②, redondea hacia abajo e imprime "Puntos obtenidos: ◯ pt (Miembro regular)" con el tipo de miembro que corresponda.

Elegir según un solo valor — switch y case

Vamos a elegir un mensaje de comisión según el método de pago que eligió el cliente. Podrías escribirlo con else if, pero repetirías la misma variable una y otra vez (paymentMethod === "credit", paymentMethod === "convenience") y costaría ver a simple vista qué se está comparando.

Con switch (una sentencia que compara un valor con varios candidatos en orden y empieza a ejecutar desde la rama que coincide), escribes el valor que se compara una sola vez entre paréntesis y enumeras los candidatos como case valor:. El break al final de una rama sale del switch, y cuando no coincide ningún case se ejecuta la rama default:.

const paymentMethod = "credit";   // método de pago que eligió el cliente

switch (paymentMethod) {
  case "credit":
    console.log("Sin comisión");                // se ejecuta esta
    break;
  case "convenience":
    console.log("Comisión: 200 yenes");         // pago en tienda de conveniencia; no coincide
    break;
  case "cod":
    console.log("Comisión: 330 yenes");         // pago contra entrega; no coincide
    break;
  default:
    console.log("Elige un método de pago");
}

default es opcional. Si un valor que no coincide con nada llega a un switch sin default, no se ejecuta ninguna rama y el programa sigue en la línea siguiente. Cuando pueden llegar valores que no están entre tus candidatos, imprimir un mensaje en default te permite ver en pantalla que llegó algo inesperado.

case distingue entre cadenas y números

switch compara igual que ===, así que valores de tipos distintos nunca coinciden. La cadena "200" leída de un campo de entrada no entra en case 200: y pasa a default. Si un valor puede llegar como número o como cadena, conviértelo a un solo tipo antes de compararlo.

Calcula el costo de envío a partir del método de envío. shippingMethod, itemTotal y shippingFee ya están declaradas.

① Usa switch para asignar un costo de envío de 500 a standard y de 900 a express.

② Añade una rama que asigne 0 a store (retiro en tienda).

③ Si no se da ninguno de estos casos, imprime "Revisa el método de envío".

④ Después del switch, imprime "Envío: ◯ yenes / Total: ◯ yenes".

Seguir en el case siguiente — omitir break

Un error habitual con switch es olvidarse de escribir break. El código sigue siendo válido, así que no hay error de sintaxis; solo te das cuenta al ejecutarlo y ver líneas de más en la salida.

Sin break, la ejecución continúa con el código de los case que están debajo del que coincidió. A esto se le llama fall-through (caída a los case siguientes). La ejecución sigue, sin comparar con los valores de los case de abajo, hasta que encuentra un break o llega al final del switch.

const orderStatus = "paid";   // estado del pedido

// Sin break, también se ejecuta el código que hay debajo del case que coincide
switch (orderStatus) {
  case "paid":
    console.log("Pagado");                      // coincide y empieza aquí
  case "shipped":
    console.log("Enviado");                     // no hay break, así que sigue
  default:
    console.log("Revisa el estado");            // se ejecuta hasta default
}

// Si apilas varios case, varios candidatos comparten el mismo bloque de código
switch (orderStatus) {
  case "pending":
  case "paid":
    console.log("Aún sin enviar");   // tanto pending como paid llegan aquí
    break;
}

Este comportamiento te sirve cuando quieres que varios candidatos compartan el mismo código. Si apilas dos etiquetas case sin código entre ellas, cuando coincide la de arriba la ejecución pasa directamente al código de abajo. Pon un break al final de la rama compartida.

Imprime las funciones disponibles en cada plan de precios. La variable plan, que contiene el plan contratado, ya está declarada.

① Imprime un encabezado con la forma "Funciones del plan standard".

② Escribe un switch e imprime "Reproducción sin conexión" en la rama de premium.

③ Debajo, añade una rama de standard que imprima "Calidad HD" y una de free que imprima "Reproducción de videos", sin escribir break.

④ Añade un case para que trial ejecute el mismo código que free.