Condicionales if y else
Las sentencias condicionales permiten ejecutar diferentes bloques de código según se cumplan o no determinadas condiciones, siendo fundamentales para el control de flujo en JavaScript.
TL;DR - Resumen rápido
- if ejecuta código solo si la condición es verdadera
- if-else permite ejecutar código alternativo cuando la condición es falsa
- else if evalúa múltiples condiciones en secuencia
- Las condicionales pueden anidarse para lógica más compleja
- El operador ternario (? :) es una forma concisa de if-else
- JavaScript evalúa condiciones como truthy o falsy
- Evitar condicionales anidadas profundas mejora la legibilidad
¿Qué son las condicionales?
Las sentencias condicionales son estructuras de control que permiten ejecutar diferentes bloques de código según se cumplan o no determinadas condiciones. Son fundamentales para tomar decisiones en tu código y controlar el flujo de ejecución del programa.
En JavaScript, las principales estructuras condicionales son if, if-else, else if y el operador ternario. Todas evalúan una expresión booleana (que resulta en true o false) para decidir qué código ejecutar.
Sentencia if básica
La sentencia if ejecuta un bloque de código solo si la condición especificada se evalúa como true. Si la condición es false, el código dentro del bloque se omite completamente.
Este ejemplo muestra las diferentes formas de usar if. Cuando edad >= 18 se cumple, se ejecuta el bloque de código dentro de las llaves. Si la condición no se cumple, JavaScript omite ese bloque completamente y continúa con el resto del programa.
Llaves siempre recomendadas
Aunque las llaves {} son opcionales para bloques de una sola línea, se recomienda usarlas siempre para evitar errores al agregar más código posteriormente.
if-else
La estructura if-else permite ejecutar un bloque de código cuando la condición es true y otro bloque alternativo cuando es false. Garantiza que siempre se ejecute uno de los dos bloques.
Con if-else tienes dos caminos mutuamente excluyentes: si la condición es verdadera se ejecuta el bloque if, si es falsa se ejecuta el bloque else. Esto es útil cuando necesitas tomar una decisión binaria en tu código, como determinar si un usuario puede o no realizar una acción.
else if (múltiples condiciones)
Cuando necesitas evaluar múltiples condiciones mutuamente excluyentes, puedes usar else if. JavaScript evalúa las condiciones en orden y ejecuta el primer bloque cuya condición sea verdadera.
El else if te permite encadenar múltiples condiciones. JavaScript las evalúa de arriba hacia abajo y ejecuta solo el primer bloque cuya condición sea verdadera. En el ejemplo, con nota = 75, se cumple la condición nota >= 70, por lo que se ejecuta ese bloque y las condiciones siguientes ni siquiera se evalúan.
Solo se ejecuta el primer bloque verdadero
Solo se ejecuta el primer bloque cuya condición sea verdadera. Las condiciones siguientes no se evalúan incluso si también serían verdaderas.
Condicionales anidadas
Puedes colocar condicionales dentro de otras condicionales para crear lógica más compleja. Sin embargo, muchas anidaciones reducen la legibilidad del código.
Las condicionales anidadas funcionan, pero más de 2-3 niveles hacen el código difícil de leer y mantener. El ejemplo muestra cómo refactorizar usando operadores lógicos (&&) en lugar de múltiples niveles de anidación, resultando en código más limpio y fácil de entender.
Evita anidación profunda
Cuando tengas más de 2-3 niveles de anidación, considera refactorizar usando return temprano, operadores lógicos, o funciones auxiliares para mejorar la legibilidad.
Operador ternario (?:)
El operador ternario es una forma concisa de escribir if-else cuando necesitas asignar un valor u otro según una condición. Su sintaxis es condición ? valorSiTrue : valorSiFalse.
El operador ternario es perfecto para asignaciones condicionales simples en una sola línea. Evalúa la condición antes del ?, si es verdadera retorna lo que está entre ? y :, si es falsa retorna lo que está después de :. Evita anidar ternarios ya que se vuelven ilegibles rápidamente.
Usa con moderación
El operador ternario es ideal para asignaciones condicionales simples. Para lógica más compleja, usa if-else tradicional para mantener la legibilidad.
Valores truthy/falsy en condicionales
Las condicionales no requieren explícitamente valores booleanos. JavaScript convierte cualquier valor a boolean mediante coerción. Los valores falsy (false, 0, "", null, undefined, NaN) se evalúan como false, todo lo demás como true.
Esta característica permite validaciones concisas como if (nombre) en lugar de if (nombre !== ""). Sin embargo, ten cuidado: valores como 0 y "" son falsy, lo que puede causar bugs si no distingues entre "sin valor" y "valor cero/vacío". En el ejemplo del stock, cantidad = 0 se evalúa como falsy, lo que puede ser intencional o un bug según tu lógica de negocio.
Buenas prácticas
Seguir buenas prácticas al escribir condicionales mejora la legibilidad, mantenibilidad y previene errores comunes en tu código.
El ejemplo muestra tres técnicas clave: comparaciones explícitas cuando importa distinguir entre 0 y undefined, return temprano para evitar else innecesarios, e inversión de condiciones para reducir anidación. La función procesarUsuario usa "guard clauses" (cláusulas de guarda) que retornan temprano en caso de error, dejando el camino feliz sin anidación.
Comparaciones explícitas
Usa comparaciones explícitas para null/undefined (!== null) en lugar de confiar en truthy/falsy cuando la distinción entre 0, "", false y null/undefined sea importante.
Casos prácticos
Veamos ejemplos reales de cómo usar condicionales en situaciones comunes de desarrollo, desde validaciones hasta lógica de negocio.
Estos casos prácticos muestran aplicaciones reales: validación de formularios con return temprano, determinación de días laborales con operadores lógicos, y cálculo de descuentos por cantidad con else if. Nota cómo cada función tiene un propósito claro y usa la estructura condicional más apropiada para su caso de uso.
Resumen
Resumen: Condicionales if y else
Conceptos principales:
- •if ejecuta código solo si la condición es true
- •if-else garantiza que se ejecute uno de dos bloques
- •else if evalúa múltiples condiciones en secuencia
- •Operador ternario (? :) para asignaciones simples
- •JavaScript evalúa valores como truthy o falsy
Mejores prácticas:
- •Usa comparaciones explícitas cuando sea importante
- •Aplica return temprano para evitar anidación
- •Invierte condiciones (guards) para código más limpio
- •Evita más de 2-3 niveles de anidación
- •Usa ternario solo para asignaciones simples