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.
Controlar el flujo significa responder bien a la pregunta más importante de cualquier app: ¿qué hago ahora con estos datos?
No se trata solo de usar <code>if</code> porque sí, sino de representar reglas de negocio de forma legible, mantenible y fácil de depurar.
Si tus condiciones son claras, tus errores se detectan antes y tu equipo entiende el código sin adivinar intenciones.
Aquí vas a construir la base que luego usarás en validación de formularios, estados del DOM y lógica asincrónica.
- 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.
- 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.
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 / 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.
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).
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.
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.
