¿Tienes reglas de estado mutuamente excluyentes. Cuál diseño reduce ambigüedad?

Orden y fallback explcito evitan caminos inconsistentes.

Control de flujo: diseña decisiones claras con if, else if y switch

Aprende a modelar decisiones de negocio con ramas limpias, evitar anidaciones caóticas y depurar condiciones para que tu código tome la ruta correcta siempre.

¿Cuánto sabes de JavaScript?

📘 Teoría

Tipos de decisión en frontend real

No toda condición se resuelve igual: elegir estructura correcta simplifica todo.

Una regla simple suele encajar en if. Cuando hay varias rutas ordenadas por prioridad, else if funciona mejor. Si comparas un mismo valor contra muchos casos concretos, switch suele ser más limpio.

El objetivo de este bloque es que dejes de improvisar estructuras y empieces a diseñar flujo con intención.

if

Para decisiones binarias rápidas.

Usuario autenticado / no autenticado
Campo válido / inválido

else if

Para prioridades o rangos.

Clasificar nota: sobresaliente, aprobado, suspenso
Determinar nivel de riesgo

switch

Para estados discretos.

Estado pedido: pendiente, enviado, entregado
Rol: admin, editor, visitante

Guard clauses

Salir pronto cuando no se cumplen precondiciones.

Evitar anidaciones profundas
Mejorar lectura y depuración

if / else if: ordenar reglas por prioridad

Cuando varias condiciones pueden cumplirse, el orden importa muchísimo.

JavaScript evalúa de arriba hacia abajo y ejecuta la primera condición verdadera. Si pones primero una regla general, puedes bloquear reglas más específicas.

En lógica de negocio, conviene empezar por casos críticos o restrictivos y luego abrir casos más amplios.

Piensa en orden de evaluación, no solo en condiciones sueltas.
Nombra variables con semántica de negocio (minutosAbierto, prioridad).
Evita ifs anidados cuando puedas resolverlo con else if.

Clasificación de tickets por SLA

const minutosAbierto = 185;
let prioridad = 'normal';

if (minutosAbierto >= 240) {
  prioridad = 'critica';
} else if (minutosAbierto >= 120) {
  prioridad = 'alta';
} else if (minutosAbierto >= 60) {
  prioridad = 'media';
}

console.log(prioridad);

switch: ideal para estados cerrados

Si comparas una variable contra muchos valores concretos, switch suele ser más legible.

switch destaca cuando trabajas con estados de UI, tipos de notificación, métodos de pago o roles. Cada case representa una rama de negocio explícita.

No olvides break para evitar 'caer' al siguiente caso por accidente (fall-through).

Estado de pedido en ecommerce

const estadoPedido = 'enviado';
let mensaje = '';

switch (estadoPedido) {
  case 'pendiente':
    mensaje = 'Estamos preparando tu pedido';
    break;
  case 'enviado':
    mensaje = 'Tu pedido va en camino';
    break;
  case 'entregado':
    mensaje = 'Pedido entregado. ¡Gracias!';
    break;
  default:
    mensaje = 'Estado desconocido';
}

console.log(mensaje);

Guard clauses: menos anidación, más claridad

Primero descarta casos inválidos y deja el camino feliz limpio.

Una guard clause es una salida temprana de función cuando no se cumplen precondiciones. Es un patrón muy profesional porque reduce complejidad cognitiva.

Cuando llegues a funciones más largas en javascript-funciones-basico, este patrón te ahorrará muchos dolores de cabeza.

Validación temprana de formulario

function registrarUsuario(email, password) {
  if (!email || !password) {
    return 'Faltan datos obligatorios';
  }

  if (password.length < 8) {
    return 'La contraseña debe tener al menos 8 caracteres';
  }

  return 'Usuario registrado correctamente';
}

console.log(registrarUsuario('ana@web.dev', '12345678'));

Errores frecuentes en flujo y cómo depurarlos

Si el resultado no cuadra, casi siempre el fallo está en la condición o su orden.

Error 1: condiciones demasiado generales arriba. Error 2: olvidar break en switch. Error 3: mezclar tipos y comparar sin normalizar.

Depuración recomendada: imprime valor de entrada, tipo y rama elegida en cada decisión para seguir el camino exacto de ejecución.

Trazar rama ejecutada

const rol = 'editor';

if (rol === 'admin') {
  console.log('rama admin');
} else if (rol === 'editor') {
  console.log('rama editor');
} else {
  console.log('rama visitante');
}

1 Tipos de decisión en frontend real 2 if / else if: ordenar reglas por prioridad 3 switch: ideal para estados cerrados 4 Guard clauses: menos anidación, más claridad 5 Errores frecuentes en flujo y cómo depurarlos

🧭 Visuales clave

Condicionales en JavaScript

Muestra rutas de ejecucion segun condiciones de negocio.

Diagrama de flujo con if, else if y else

Arbol basico de decision

Refuerza la lectura mental de un condicional como una bifurcacion del flujo, algo muy util antes de escribir cadenas de if y else if.

Arbol de decision visual con una condicion y dos ramas posibles segun se cumpla o no

🧪 Aprende probando

Ejemplo Ejemplo guiado: switch para método de pago Mapea cada método a un mensaje de UX usando switch + default.

⌄

Ejemplo Demo interactiva: enrutar tickets de soporte Selecciona prioridad y tipo de incidencia; el sistema decidirá cola y tiempo estimado automáticamente.

⌄

Ejemplo Demo interactiva: condicionales con energía y clima Ajusta un valor numérico y un estado discreto para ver cuándo conviene usar `if / else if / else` y cuándo `switch`.

⌄