CAP 03 · LEC 03·Control de flujo
Operador ternario: condiciones en una sola línea
El operador ternario es un if/else compacto para expresiones. Bien usado hace el código más limpio; mal usado lo hace ilegible. Aprende la diferencia.
¿Encontraste un error o algo que mejorar?Editá esta lección en GitHub →
Sintaxis
condición ? valorSiTrue : valorSiFalse
const edad = 20;
// if/else equivalente
let estado;
if (edad >= 18) {
estado = "adulto";
} else {
estado = "menor";
}
// Ternario (una línea, más limpio)
const estado2 = edad >= 18 ? "adulto" : "menor";
console.log(estado2); // "adulto"const activo: boolean = true;
// TypeScript infiere el tipo del resultado
const etiqueta = activo ? "Activo" : "Inactivo";
// tipo inferido: string
// Con tipos diferentes (union type)
const valor = activo ? 1 : "desconocido";
// tipo inferido: number | stringSalida
adultoUsos comunes
// 1. Valores por defecto
const nombre = usuario?.nombre ?? "Invitado";
// 2. Clases CSS condicionales (React/JSX)
const clase = esActivo ? "btn-activo" : "btn-inactivo";
// 3. Mensajes condicionales
const msg = items.length > 0
? `Tienes ${items.length} artículos`
: "Carrito vacío";
// 4. Dentro de JSX
// return <span>{esAdmin ? "Admin" : "Usuario"}</span>;Ternarios anidados — cuándo evitarlos
// ❌ Ternario anidado — ilegible
const clasificacion = nota >= 90 ? "A"
: nota >= 80 ? "B"
: nota >= 70 ? "C"
: nota >= 60 ? "D"
: "F";
// ✅ Mejor con if/else if
let clasificacion2;
if (nota >= 90) clasificacion2 = "A";
else if (nota >= 80) clasificacion2 = "B";
else if (nota >= 70) clasificacion2 = "C";
else if (nota >= 60) clasificacion2 = "D";
else clasificacion2 = "F";
// ✅ O con un array de rangos (ordenado de mayor a menor)
const rangos = [[90, "A"], [80, "B"], [70, "C"], [60, "D"]];
const clasificacion3 = rangos.find(([min]) => nota >= min)?.[1] ?? "F";La regla de oro del ternario
Usa el ternario cuando el resultado es un valor simple de dos opciones. Si necesitas más de dos opciones o ejecutar efectos secundarios, usa if/else o switch.