Los operadores ternarios y la evaluación de cortocircuito permiten escribir condicionales más concisos y expresivos en JavaScript, pero requieren un uso juicioso para mantener la legibilidad del código.

En la primera parte de esta guía, exploramos los fundamentos de las estructuras condicionales en JavaScript. Ahora profundizaremos en técnicas más avanzadas que los desarrolladores utilizan diariamente para escribir código más limpio y expresivo.

Profundizando en el Operador Ternario

El operador ternario (condición ? valorSiVerdadero : valorSiFalso) es más que una simple alternativa abreviada al if...else. Su verdadero poder reside en que es una expresión que devuelve un valor, no solo una sentencia que ejecuta código.

Ternarios anidados: ¿amigos o enemigos?

Los ternarios pueden anidarse, pero esto rápidamente puede comprometer la legibilidad:

// Ejemplo de ternario anidado (¡cuidado con el exceso!)
const mensaje = edad >= 18 ? 
  (esMiembro ? "Pase VIP" : "Pase estándar") : 
  "Acceso denegado";

// Forma más legible del mismo código
const obtenerMensaje = (edad, esMiembro) => {
  if (edad < 18) return "Acceso denegado";
  return esMiembro ? "Pase VIP" : "Pase estándar";
};

Regla práctica: Si necesitas más de un nivel de anidación, considera usar if...else o dividir la lógica en funciones separadas.

Usos avanzados del ternario

Los ternarios brillan en situaciones específicas:

// 1. En asignaciones directas
const estadoUsuario = estaActivo ? "Conectado" : "Desconectado";

// 2. En returns de funciones
function obtenerSaludo(usuario) {
  return usuario ? `Hola, ${usuario.nombre}` : 'Hola, invitado';
}

// 3. Como argumentos de funciones
console.log(`Estado: ${esError ? "ERROR" : "OK"}`);

// 4. En templates literales
const mensajeBienvenida = `
  Bienvenido, ${usuario.tieneFoto ? usuario.nombre : "Usuario"}`;

Evaluación de Cortocircuito: && y ||

JavaScript evalúa expresiones booleanas de izquierda a derecha y se detiene («cortocircuito») cuando el resultado final ya está determinado. Este comportamiento se puede aprovechar para escribir condicionales concisos.

El operador OR (||) para valores por defecto

Cuando se usa ||, JavaScript devuelve el primer valor «truthy» que encuentra:

// Valor por defecto tradicional
let nombre = nombreIngresado;
if (!nombreIngresado) {
  nombre = "Invitado";
}

// Con cortocircuito (mucho más limpio)
const nombre = nombreIngresado || "Invitado";

// Otros casos prácticos
const puerto = proceso.env.PUERTO || 3000;
const configuracion = configUsuario || configuracionPorDefecto;

Evaluación de Cortocircuito: && y ||

JavaScript evalúa expresiones booleanas de izquierda a derecha y se detiene («cortocircuito») cuando el resultado final ya está determinado. Este comportamiento se puede aprovechar para escribir condicionales concisos.

El operador OR (||) para valores por defecto

Cuando se usa ||, JavaScript devuelve el primer valor «truthy» que encuentra:

// Valor por defecto tradicional
let nombre = nombreIngresado;
if (!nombreIngresado) {
  nombre = "Invitado";
}

// Con cortocircuito (mucho más limpio)
const nombre = nombreIngresado || "Invitado";

// Otros casos prácticos
const puerto = proceso.env.PUERTO || 3000;
const configuracion = configUsuario || configuracionPorDefecto;

El operador AND (&&) para ejecución condicional

El operador && devuelve el primer valor «falsy» que encuentra, o el último valor si todos son «truthy»:

// Ejecución condicional tradicional
if (usuarioEstaLoggeado) {
  mostrarPanelDeControl();
}

// Con cortocircuito
usuarioEstaLoggeado && mostrarPanelDeControl();

// En combinación con React o JSX
{ 
  esAdministrador && <PanelAdministracion />
}

// Para acceso seguro a propiedades anidadas
const ciudad = usuario && usuario.direccion && usuario.direccion.ciudad;

Nota importante: Con la introducción del operador de encadenamiento opcional (?.) en ES2020, el patrón para acceso seguro a propiedades se ha simplificado:

// Forma moderna (ES2020+)
const ciudad = usuario?.direccion?.ciudad;

Switch con Return: Una alternativa más limpia

En tu primer artículo mencionaste el error común de olvidar break en los statements switch. Una alternativa moderna es usar switch dentro de funciones con return, eliminando la necesidad de break:

// Forma tradicional (propensa a errores)
function obtenerDiaSemana(numero) {
  let dia;
  switch(numero) {
    case 0: dia = "Domingo"; break;
    case 1: dia = "Lunes"; break;
    // ... más casos, cada uno con break
    default: dia = "Día inválido"; break;
  }
  return dia;
}

// Forma más segura y concisa
function obtenerDiaSemana(numero) {
  switch(numero) {
    case 0: return "Domingo";
    case 1: return "Lunes";
    case 2: return "Martes";
    case 3: return "Miércoles";
    case 4: return "Jueves";
    case 5: return "Viernes";
    case 6: return "Sábado";
    default: return "Día inválido";
  }
  // No se necesita break porque return sale de la función
}

Buenas Prácticas para Condicionales Legibles

// Código profundamente anidado (difícil de leer)
function procesarPedido(pedido) {
  if (pedido) {
    if (pedido.valido) {
      if (pedido.items.length > 0) {
        // Lógica principal aquí...
        return resultado;
      } else {
        throw new Error("Pedido sin items");
      }
    } else {
      throw new Error("Pedido inválido");
    }
  } else {
    throw new Error("No hay pedido");
  }
}

// Refactorizado con guard clauses (mucho más claro)
function procesarPedido(pedido) {
  if (!pedido) throw new Error("No hay pedido");
  if (!pedido.valido) throw new Error("Pedido inválido");
  if (pedido.items.length === 0) throw new Error("Pedido sin items");
  
  // Lógica principal aquí, sin anidación
  return resultado;
}

2. Nombres de variables booleanas claros

Los nombres de variables booleanas deben leerse como preguntas:

// ❌ Poco claro
if (flag) { ... }
if (status) { ... }

// ✅ Autoexplicativo
if (usuarioEstaActivo) { ... }
if (pagoEstaCompletado) { ... }
if (tienePermisosDeEscritura) { ... }

3. Extrae condiciones complejas a funciones con nombres descriptivos

// ❌ Condición compleja en línea
if (usuario.edad >= 18 && usuario.tieneLicencia && !licencia.suspendida) {
  permitirConducir();
}

// ✅ Condición extraída a función con nombre descriptivo
function puedeConducir(usuario) {
  return usuario.edad >= 18 && 
         usuario.tieneLicencia && 
         !usuario.licencia.suspendida;
}

if (puedeConducir(usuario)) {
  permitirConducir();
}

Cuándo usar cada patrón: Guía de referencia

Conclusión

Dominar estas técnicas avanzadas de condicionales te permitirá escribir código JavaScript más expresivo, conciso y mantenible. La clave está en conocer todas las herramientas disponibles y elegir la más adecuada para cada situación:

• Usa ternarios para asignaciones condicionales simples
• Aprovecha el cortocircuito para valores por defecto y ejecución condicional concisa
• Considera switch con return para múltiples valores discretos
• Aplica guard clauses para aplanar estructuras anidadas
• Prioriza siempre la legibilidad sobre la brevedad

El mejor código no es necesariamente el más corto, sino el que comunica con mayor claridad su intención al siguiente desarrollador que lo leerá (¡que bien podrías ser tú mismo en unos meses!).