El operador condicional (ternario) constituye una forma compacta, concisa y elegante de escribir una sentencia condicional del tipo if…else, pero en una sola línea. De hecho, es conocido como operador «ternario» porque es el único operador del lenguaje JavaScript que usa tres operandos para funcionar. Se expresa con dos símbolos: el de interrogación (?) y los dos puntos (:).
Mientras que la instrucción if…else se utiliza para ejecutar bloques de código con múltiples sentencias y manejar lógica más compleja, el operador ternario (? :) se usa principalmente cuando se necesita evaluar una condición y devolver un valor de forma directa, ideal para expresiones simples y de una sola línea.
Sintaxis
Como su propio nombre sugiere, la sintaxis del operador ternario está compuesta por tres partes, ya que usa tres operandos. La primera parte es una condición, seguida de un signo de interrogación (?). Le sigue una expresión para ejecutar cuando la condición sea verdadera, seguida de los dos puntos (:). Finalmente, se indica la expresión a ejecutar si la condición es falsa.
condición ? exprSiTrue : exprSiFalse
La condición es una expresión booleana, es decir, algo que puede evaluarse como true (verdadero) o false (falso). Por ejemplo, una comparación (edad >= 30) o una verificación de igualdad (usuario === 'admin').
La expresión verdadera es la parte del operador ternario que se ejecuta solo si la condición inicial se cumple (verdadera). Puede ser cualquier expresión válida del lenguaje JavaScript, como sería un valor literal, una llamada a función, una operación matemática o incluso otra expresión condicional.
Por su parte, la expresión falsa define el resultado alternativo, es decir, lo que se devuelve cuando la condición no se cumple (falsa). Aunque no es obligatorio, es una buena práctica que ambas expresiones devuelvan valores del mismo tipo o con un propósito equivalente, para mantener la coherencia del código.
Ejemplo básico
Vamos a crear un ejemplo en el que se asigna un valor monetario a la variable precioEnvio para decidir el precio de envío de un paquete. Si el usuario es miembro, el precio de envío vale 0,00 €, pero si no es miembro, vale 4,95 €.
const esMiembro = true;
let precioEnvio = esMiembro ? 0 : 4.95;
console.log('El precio de envío es:', precioEnvio);
La constante esMiembro es verdadera, por tanto, se le asigna el precio de 0,00 €. Si fuese falsa, se le aplicaría el precio de 4,95 €. Como se puede ver, el valor se asigna en la misma declaración de la variable precioEnvio.
Este código tan simple y compacto es equivalente al siguiente, que usa la instrucción condicional ‘if…else’ en lugar del operador condicional ternario:
const esMiembro = true;
let precioEnvio;
if (esMiembro) {
precioEnvio = 0;
} else {
precioEnvio = 4.95;
}
En este caso, el código es más extenso y algo repetitivo, ya que requiere realizar dos asignaciones por separado. Sin embargo, al tener dos bloques de código independientes, resultaría útil si se tuviera que añadir más sentencias o realizar operaciones adicionales en cada rama del condicional.
Anidación
Los operadores ternarios pueden anidarse de manera encadenada, de forma similar a la que se consigue mediante un ‘if…else if…else’. No obstante, no se recomienda abusar de esta técnica porque reduce la legibilidad del código.
La sintaxis es la siguiente:
condición1 ? valor1
: condición2 ? valor2
: condición3 ? valor3
: valor4;
Para mejorar la legibilidad, el código se puede dividir en varias líneas sin que esto afecte a su funcionamiento. Si se deja todo en una misma línea, el resultado será una instrucción larga y difícil de leer.
El operador ternario se evalúa de izquierda a derecha. Si la primera condición es falsa, pasa a la expresión de la derecha, después de los dos puntos (:). Entonces, el operando de la derecha del todo se convierte en otro operador ternario, y así sucesivamente tantas veces como sea necesario.
Ejemplo de anidación
Para “ilustrar” esta estructura de código, vamos a crear un pequeño programa que analice una nota de examen y muestre la calificación textual: «suspendido» (< 5), «aprobado» (< 7), «notable» (< 9) o «sobresaliente».
let nota = 7;
let calificacion =
nota < 5 ? 'Suspendido'
: nota < 7 ? 'Aprobado'
: nota < 9 ? 'Notable'
: 'Excelente';
console.log(calificacion);
En este ejemplo, primero se evalúa la expresión nota < 5. Como la variable nota vale 7, la condición es falsa, por lo que el flujo pasa al siguiente ternario. Luego se evalúa la expresión nota < 7, que también es falsa. En este punto, la expresión a evaluar es nota < 9; ahora la condición es verdadera, por lo tanto, se asigna el valor «Notable» a la variable calificacion.
Aunque este ejemplo funciona correctamente, no se recomienda anidar operadores ternarios más allá de dos o tres condiciones, ya que dificulta la legibilidad y el mantenimiento del código, sobre todo para otros programadores. Para más de tres condiciones, es preferible utilizar la estructura switch.
Consejos
Usa el operador condicional ternario cuando la condición sea simple o cuando ambas ramas devuelvan valores claros y breves. También es útil usarlo es cuando se quiere mantener un código más compacto y conciso.
Por el contrario, evita emplearlo cuando las operaciones sean demasiado largas o complejas, ya que esto solo añadiría complejidad a su su legibilidad. Tampoco conviene abusar de las anidaciones de ternarios.
