> Manuales > Manual de JavaScript

En qué consiste el operador ternario de Javascript, también llamado operador condicional, con ejemplos de uso y recomendaciones.

Operador ternario en Javascript

Después de haber conocido los operadores de Javascript más importantes, vamos a abordar otro operador relevante, aunque no tan usado. Se trata del operador ternario de Javascript, el cual resulta de mucha utilidad en el día a día cuando queremos sacar un valor posible dependiendo de una expresión condicional.

Qué es el operador ternario

El operador ternario lo podemos entender como una estructura compacta para hacer condicionales. Consiste en una expresión que se evaluará y, dependiendo de si dicha evaluación fue positiva o negativa devolverá una u otra cosa.

Su sintaxis es la siguiente:

expresión_condicional ? expresion1 : expresion2;

La "expresion_condicional" será la que se evalue, positiva o negativamente. "expresion1" se ejecutará en caso que sea positiva y "expresion2" se ejecutará si era negativa. Adicionalmente, como resultado de la ejecución del operador ternario, se retornará aquello que devuelva la expresión finalmente ejecutada (la 1 o la 2).

Este operador condicional se conoce como ternario porque tiene tres operadores, tanto la expresión condicional a evaluar como dos expresiones a ejecutar para el caso positivo o el negativo.

Veamos un ejemplo de uso:

(x < 1000) ? x : 1000;

Ese código entregará el valor de x si la variable x era un número menor de 1000. En caso contrario (x no era menor de 1000) devolverá 1000.

Como esta sentencia termina devolviendo el valor resultado de una expresión u otra, es común que se use junto con una sentencia de asignación.

var valor_x_limitado_a_1000 = (x < 1000) ? x : 1000;

Al ejecutarse la anterior línea de código tendremos una variable llamada "valor_x_limitado_a_1000" que contendrá el valor de x o, si x sobrepasa 1000, contendrá el valor 1000.

Otro ejemplo, podríamos sacar el nombre de un día de la semana, asegurándonos que nos den un número de día correcto. Para construir este ejemplo necesitamos tener un array con los números de la semana;

var weekDays = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];

Luego podríamos usar el operador ternario de esta manera:

var dia = (numeroDeDia < weekDays.length) ? weekDays[numeroDeDia - 1] : 'dia incorrecto';

El código completo de un script que podría valernos para probar esta sentencia podría ser el siguiente:

var numeroDeDia = 3;
var weekDays = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
var dia = (numeroDeDia < weekDays.length) ? weekDays[numeroDeDia - 1] : 'dia incorrecto';
console.log(dia);

Como has visto, hemos conseguido un comportamiento muy compacto. Sin usar el operador ternario también podríamos haber obtenido un resultado válido pero con más líneas de código. Veamos este mismo comportamiento con un if de toda la vida.

var numeroDeDia = 3;
var weekDays = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
if (numeroDeDia < weekDays.length) {
    var dia = weekDays[numeroDeDia - 1];
} else {
    var dia = 'dia incorrecto';
}
console.log(dia);

Recomendaciones de uso del operador condicional

Este operador es muy potente, dado que consigue un comportamiento bastante amplio para el poco código usado. Sin embargo, en ocasiones, el resultado no es tan claro como podría ser un simple "if".

Por tanto, debemos usarlo con precaución, analizando si verdaderamente es necesario o no, así como si facilita realmente la lectura del código y por tanto su mantenimiento, o por contra, lo empeora.

Por ejemplo, vamos a volver para el ejemplo del número limitado a 1000. ¿Cómo haríamos para controlar el caso especial en el que se entregue algo que no sea un número? Queremos que se controle:

Esa lógica la podríamos expresar así:

var limitado = (isNaN(x)) ? 0 : (x < 1000) ? x : 1000;

No sé si estarás de acuerdo que la sentencia comienza a resultar poco clara. Quizás habría que cambiar la estrategia por algo más sencillo como:

var limitado
if(isNaN(x)) {
	limitado = 0;
} else {
	limitado = (x < 1000) ? x : 1000;
}

Estos dos códigos son equivalentes. La segunda alternativa tiene claramente más código, pero quizás para muchas personas sea más clara que la primera. A la vista del if, queda patente que primero deseamos comprobar si no es un número, en cuyo caso el valor limitado será 0. Luego, si era un número, entonces se entrega el valor limitado a 1000.

Por poner otro tipo de ejemplo. Queremos una función que nos indique si un número es par o impar. El código podría ser este:

function esPar(valor) {
    return valor % 2 == 0 ? true : false;
}

¿Qué opinas de ese código? ¿es suficientemente claro?

Es una pregunta con trampa, porque en este caso el problema no es la claridad, es que realmente es innecesario el operador condicional. Podríamos haber escrito simplemente esto:

function esPar(valor) {
    return valor % 2 == 0;
}

Conclusión

Hemos aprendido a usar el operador ternario, también llamado operador condicional, de Javascript. Es una herramienta útil por su potencia y la capacidad de implementar una operación condicional con poco código.

Este operador lo encontrarás en muchos otros lenguajes de programación, por lo que resulta muy extendido. Es importante que lo conozcas y lo tengas a mano para usarlo cuando realmente ayude a crear un código más resumido, siempre con cuidado para no perder su facilidad de lectura y comprensión.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual