Lección 17: Operador Ternario

🧠 Concepto

El operador ternario (o condicional ternario) es una forma concisa de escribir un if...else en una sola línea. Se llama “ternario” porque tiene tres operandos.

Sintaxis

condicion ? valorSiTrue : valorSiFalse;

• condicion: expresión que se evalúa como booleano.
• valorSiTrue: valor devuelto si la condición es true.
• valorSiFalse: valor devuelto si la condición es false.

Comparación con if/else

// Con if/else
let mensaje;
if (edad >= 18) {
  mensaje = 'Mayor de edad';
} else {
  mensaje = 'Menor de edad';
}

// Con ternario (mucho más conciso)
let mensaje = edad >= 18 ? 'Mayor de edad' : 'Menor de edad';

Cuándo usarlo

✅ Úsalo para: asignaciones simples, retornos de función, condiciones inline.

❌ NO lo uses para: lógica compleja, múltiples condiciones anidadas, acciones que no devuelven un valor.

Ternario anidado (⚠️ con cuidado)

Se puede anidar ternarios, pero afecta la legibilidad:

let nota = 85;
let calificacion = nota >= 90 ? 'Excelente'
                 : nota >= 70 ? 'Bueno'
                 : nota >= 50 ? 'Suficiente'
                 : 'Insuficiente';

A veces es aceptable, pero si hay más de 3 niveles, mejor usa if/else o switch.

Return ternario

Es muy común en funciones:

function esMayorEdad(edad) {
  return edad >= 18 ? 'Sí' : 'No';
}

💻 Ejemplo

// Asignación condicional
let edad = 20;
let puedeVotar = edad >= 18 ? 'Sí, puede votar' : 'No puede votar';
console.log(puedeVotar); // "Sí, puede votar"

// Ternario con template literal
let hora = 10;
let saludo = `¡${hora < 12 ? 'Buenos días' : 'Buenas tardes'}!`;
console.log(saludo); // "¡Buenos días!"

// Múltiples ternarios (con moderación)
let temperatura = 25;
let clima = temperatura > 30 ? 'Caluroso'
           : temperatura > 20 ? 'Templado'
           : temperatura > 10 ? 'Frío'
           : 'Muy frío';
console.log(clima); // "Templado"

// Ternario para mostrar/ocultar (sin else)
let estaLogueado = true;
console.log(estaLogueado ? 'Usuario autenticado' : '');

📝 Ejercicio

1. Crea un archivo operador-ternario.js.
2. Declara una variable numero con cualquier valor.
3. Usa el ternario para determinar si es positivo, negativo o cero.
4. Declara nombreUsuario (puede ser null o un string).
5. Usa ternario para mostrar “Bienvenido, [nombre]” o “Bienvenido, Invitado”.
6. Escribe una función parImpar(n) que devuelva “par” o “impar” usando ternario.

let numero = 7;

let tipo = numero > 0 ? 'Positivo'
         : numero < 0 ? 'Negativo'
         : 'Cero';
console.log(`${numero} es ${tipo}`);

let nombreUsuario = 'Carlos';
let saludo = nombreUsuario
  ? `Bienvenido, ${nombreUsuario}`
  : 'Bienvenido, Invitado';
console.log(saludo);

function parImpar(n) {
  return n % 2 === 0 ? 'par' : 'impar';
}

console.log(`El número ${numero} es ${parImpar(numero)}`);

⚠️ Nota

No uses el ternario para ejecutar acciones que no devuelven un valor:

// ❌ Mal uso (el ternario no es para acciones secundarias)
edad >= 18 ? console.log('Adulto') : console.log('Menor');

// ✅ Mejor usa if
if (edad >= 18) {
  console.log('Adulto');
} else {
  console.log('Menor');
}

El ternario debe usarse principalmente para valores y expresiones, no para efectos secundarios.

🎯 Tip

El ternario es excelente para renderizado condicional en interfaces. En React, por ejemplo:

return (
  <div>
    {usuario ? <Saludo nombre={usuario} /> : <Login />}
  </div>
);

Pero eso lo veremos más adelante. Por ahora, úsalo para simplificar asignaciones condicionales.