Estructuras de control: Condicionales - Operador ternario
Hasta ahora hemos aprendido a tomar decisiones utilizando las estructuras if, else y else if.
Sin embargo, en algunas ocasiones solo necesitamos decidir entre dos posibles resultados.
Para estos casos JavaScript dispone del operador ternario, una forma más corta de escribir un if...else.
Importante: El operador ternario no sustituye al
if. Simplemente es una forma abreviada de escribir condiciones sencillas.
¿Por qué se llama operador ternario?
Se llama ternario porque está formado por tres partes:
- Una condición.
- El valor que se devuelve si la condición es verdadera.
- El valor que se devuelve si la condición es falsa.
Su estructura utiliza dos símbolos:
?:
Sintaxis
La sintaxis dista bastante de la vista en los condicionales anteriores, ya que es muy simplificada.
condición ? valorSiEsVerdadero : valorSiEsFalso;
Si la condición es verdadera, JavaScript devuelve el valor situado después del ?.
Si la condición es falsa, devuelve el valor situado después del :.
Comparación con un if
Veamos el mismo ejemplo utilizando ambas opciones.
Con if:
let edad = 20;
if (edad >= 18) {
console.log("Mayor de edad");
} else {
console.log("Menor de edad");
}
Con el operador ternario:
let edad = 20;
console.log(
edad >= 18
? "Mayor de edad"
: "Menor de edad"
);
// O también equivalente:
let mensaje =
edad >= 18
? "Mayor de edad"
: "Menor de edad";
console.log(mensaje);
Ambos programas producen exactamente el mismo resultado.
Diagrama de funcionamiento
¿Condición?
/ \
Sí No
│ │
Valor A Valor B
Primer ejemplo
Comprobar si una persona es mayor de edad.
let edad = 22;
let mensaje = edad >= 18
? "Puede acceder"
: "Acceso denegado";
console.log(mensaje);
Resultado:
Puede acceder
Ejemplo 2
Determinar si un número es par.
let numero = 8;
let resultado = numero % 2 === 0
? "Es par"
: "Es impar";
console.log(resultado);
Resultado:
Es par
Ejemplo 3
Comprobar una contraseña.
let password = "javascript";
let acceso = password === "javascript"
? "Acceso permitido"
: "Contraseña incorrecta";
console.log(acceso);
Guardar el resultado en una variable
Una de las ventajas del operador ternario es que devuelve un valor.
Eso significa que podemos asignarlo directamente a una variable.
let nota = 7;
let estado = nota >= 5
? "Aprobado"
: "Suspenso";
Posteriormente podremos utilizar esa variable donde queramos.
console.log(estado);
Resultado:
Aprobado
Ejercicios
Ejercicio 1
Supongamos una tienda online. Crea una variable que guarde el total de la compra.
Si la compra supera los 50 €, el envío es gratuito, sino cuesta 3.95€.
El programa debe mostrar el gasto total del pedido.
Por ejemplo: para una compra de 52€, el programa debería decir que el gasto total es 52€ (ya que el envio el gratuito). Pero para una compra de 10€, el programa debería devolver un gasto total de 13.95€
Ejercicio 2
Crea una variable que guarde el % de batería de un móvil. Si la batería es menor que 20%, debe mostrar mensaje de Batería baja, sino de Batería suficiente.
Operadores ternarios anidados
Es posible utilizar varios operadores ternarios seguidos.
let nota = 8;
let resultado =
nota >= 9
? "Sobresaliente"
: nota >= 7
? "Notable"
: nota >= 5
? "Aprobado"
: "Suspenso";
console.log(resultado);
El programa funciona correctamente.
Sin embargo...
No suele ser recomendable.
Aunque JavaScript lo permite, el código resulta mucho más difícil de leer.
En estos casos es preferible utilizar una estructura if...else if.
¿Cuándo utilizar el operador ternario?
El operador ternario resulta muy útil cuando solo necesitamos elegir entre dos posibilidades.
Por ejemplo:
let mensaje = edad >= 18
? "Mayor"
: "Menor";
También es muy habitual para asignar valores.
let color = modoOscuro
? "black"
: "white";
¿Cuándo NO utilizarlo?
No conviene utilizar el operador ternario cuando la lógica empieza a complicarse.
Por ejemplo:
let nota = 7;
if (nota >= 9) {
console.log("Sobresaliente");
}
else if (nota >= 7) {
console.log("Notable");
}
else if (nota >= 5) {
console.log("Aprobado");
}
else {
console.log("Suspenso");
}
Este código resulta mucho más claro que escribir varios ternarios anidados.
Comparativa
Utilizando if
let conectado = true;
if (conectado) {
console.log("Usuario conectado");
} else {
console.log("Usuario desconectado");
}
Utilizando un operador ternario
let conectado = true;
console.log(
conectado
? "Usuario conectado"
: "Usuario desconectado"
);
Los dos programas hacen exactamente lo mismo.
La diferencia es que el segundo ocupa menos líneas.
Errores frecuentes
Olvidar los dos puntos (:)
❌ Incorrecto
edad >= 18
? "Mayor";
El operador ternario siempre necesita dos posibles resultados.
✅ Correcto
edad >= 18
? "Mayor"
: "Menor";
Escribir instrucciones demasiado largas
❌ Incorrecto
edad >= 18
? console.log("Mayor"), console.log("Puede conducir")
: console.log("Menor");
Si el código ocupa varias líneas o realiza muchas acciones, probablemente un if sea una mejor opción.
Buenas prácticas
✅ Utiliza el operador ternario únicamente para decisiones sencillas.
✅ Si el código empieza a resultar difícil de leer, utiliza un if.
✅ Evita anidar varios operadores ternarios.
Resumen
El operador ternario es una forma abreviada de escribir un if...else.
Su sintaxis es:
condición ? valorSiEsVerdadero : valorSiEsFalso;
Es una herramienta muy útil para condiciones simples, pero no debe utilizarse para sustituir todas las estructuras if.