Operador ternario — Condición en una sola línea

Al finalizar este tema

Comprenderás la estructura del operador ternario, podrás reemplazar if/else por una sola línea y sabrás evaluar cuándo es apropiado usar el operador ternario y cuándo puede dificultar la legibilidad.

De 4 líneas de if a 1 línea

Para una bifurcación simple como "si es adulto, permitir entrada; de lo contrario, bloquear", escribirlo con if/else sería:

let message;
if (age >= 18) {
  message = "Entrada permitida";
} else {
  message = "Acceso denegado a menores";
}

Al convertirlo en un operador ternario, queda en una sola línea:

const message = age >= 18 ? "Entrada permitida" : "Acceso denegado a menores";

Estructura: condición ? valor_si_verdadero : valor_si_falso

La clave es que el operador ternario devuelve un valor. if es una sentencia (statement), por lo que no devuelve un valor, pero el ternario es una expresión (expression), lo que permite asignarlo directamente a una variable.

Patrón básico

// Patrón 1: asignación de variable
const status = score >= 60 ? "Aprobado" : "Suspenso";

// Patrón 2: argumento de función
console.log(isLoggedIn ? "Bienvenido" : "Inicia sesión");

// Patrón 3: dentro de un literal de plantilla
const greeting = `Son las ${hour % 12} ${hour < 12 ? "de la mañana" : "de la tarde"}`;

Punto común: En situaciones donde "hay que elegir entre dos valores", el operador ternario resulta natural cuando la elección se resuelve en una sola línea.

Operador ternario en React/JSX

En React, el operador ternario es casi indispensable. Esto se debe a que no se pueden usar sentencias if dentro de JSX:

function UserGreeting({ isLoggedIn, name }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>¡Bienvenido, {name}!</h1>
      ) : (
        <button>Iniciar sesión</button>
      )}
    </div>
  );
}

Dentro de las llaves {} en JSX solo se pueden colocar expresiones. No es posible incluir instrucciones (statements) como if/else, y el operador ternario es la única manera de realizar una ramificación condicional en línea.

Ternarios anidados — tentación y trampa

Cuando hay más de dos ramas, surge la tentación de anidar los operadores ternarios:

// ❌ Difícil de leer
const label = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

Este código funciona, pero al leerlo seis meses después tomará tiempo interpretarlo. Los ternarios anidados tienen mala legibilidad incluso con sangría.

Alternativa 1 — if/else:

// ✅ Claro
let label;
if (score >= 90) label = "A";
else if (score >= 80) label = "B";
else if (score >= 70) label = "C";
else label = "F";

Opción 2: Mapeo de objetos o extracción de funciones

function getGrade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "F";
}
const label = getGrade(score);

Operador ternario vs && (AND lógico)

En React, cuando la condición es verdadera y se debe renderizar, pero si es falsa no se debe hacer nada:

// Ternario: devuelve null de forma explícita
{isAdmin ? <AdminPanel /> : null}

// Operador &&: más conciso
{isAdmin && <AdminPanel />}

&& es más limpio que el operador ternario cuando no hay nada que renderizar. Sin embargo, hay un punto a tener en cuenta:

// ⚠️ Peligro: si count es 0, se renderiza "0" en pantalla
{count && <ItemList />}

// ✅ Seguro: conversión booleana explícita
{count > 0 && <ItemList />}

0 es falsy, pero React renderiza el número 0 en la pantalla. Cuando el lado izquierdo de && es un número, se debe usar un operador de comparación para convertirlo a booleano.

Diferencia con el Operador de Coalescencia Nula (??)

// Ternario: elige entre dos valores según una condición
const display = value !== null ? value : "valor predeterminado";

// ??: sustituye solo cuando es null o undefined
const display = value ?? "valor predeterminado";

?? filtra únicamente null y undefined. Los valores falsy como 0, "" y false pasan sin ser filtrados. El operador ternario puede utilizarse con cualquier condición, por lo que es de propósito general, mientras que ?? está especializado en el uso específico de "valor predeterminado cuando no hay valor".

Criterios de decisión

El operador ternario se utiliza únicamente cuando se cumplen todas las siguientes condiciones: "dos opciones, una línea, retorno de valor". Si alguna no se cumple, es preferible usar if/else.

Conclusión clave: El operador ternario es condición ? A : B, una expresión que elige entre dos valores. La anidación dificulta la lectura; si aumentan las ramificaciones, vuelva a utilizar if/else.