Operador ternario de javascript


El operador ternario de JavaScript (y en otros lenguajes de programación) es una forma abreviada de la sentencia if else para tomar una decisión. Usarla nos ayuda a crear código más limpio y fácil de entender y además nos ayuda a escribir código más rápido por que hay menos caracteres que escribir.

Para entenderlo veamos primero la versión larga con un ejemplo en el que vamos a mostrar un mensaje en pantalla diciendo si alguien aprueba o falla un examen basándonos en un puntaje:

    let puntaje = 5;
    if (puntaje >= 6) {
      alert('Aprobaste');
    }
    else {
      alert('Fallaste');
    }

El resultado del código anterior será: Fallaste. Ahora veamos la versión abreviada:

    let puntaje = 5;
    alert ( puntaje >= 6 ? 'Pasaste' : 'Fallaste' );

El resultado será el mismo, pero se ve mucho mejor ¿cierto?, pero ahora voy a explicarte todo esto de forma muy sencilla, el operador ternario trabaja de esta forma:

Operador ternario javascript

Se llama ternario porque consta de 3 partes, la primera es la condición, la segunda el valor que regresa si la condición es verdadera y el tercero es el valor que retorna si la condición es falsa.

Ambos valores para falso y verdadero se separan entre ellos con un signo : mientras en el signo ? se usa para separar la condición de los posibles valores falso y verdadero. Como puedes ver, es muy sencillo.

Usos prácticos del operador ternario.

Ya sabes usar esté if abreviado, pero veamos algunos ejemplos de la vida real:

Tomar valores predeterminados

Imagina que tienes una variable y en algún momento debes de inicializarla, pero no encontraste un valor inicial, entonces debes protegerte tomando un valor predeterminado, y puedes usar un código como este:

 let email;
 
 //Ahora, aquí debe ir el código que usas para leer en alguna
 //configuración cuál es el email para enviar avisos.
 //ese código lo omito para mantener el codigo corto.
 
 email = typeof(email) !== 'undefined' ?  email : '[email protected]';

Transformar un valor a otro.

Ahora suponemos que en una variable tienes el código de género (sexo) de una persona, y deseas transformar el código a una descripción que las personas puedan leer de forma natural. Puedes usar un código como este:

 let genero;
 
 // Convertir f a femenino y m a masculino 
 genero = 'm';
 
 alert( (genero=='m')?'Masculino':'Femenino' )

En este caso la salida será: Masculino

Personalizar una cadena de texto basándose en una variable.

En este ejemplo, vamos a mostrar la decisión que un usuario tomó y que tenemos almacenada en una variable. En este caso usamos el operador ternario para cambiar un valor true/false a si/no

 let opcion = true;
 let msg;
 
 msg = 'Usted ha elegido ' + ((opcion)?'si':'no') + ' recibir notificaciones';
	
 alert( msg );

¿Es malo usar el operador ternario?

Hay muchas discusiones y opiniones sobre esto, pero el operador ternario no es un sustituto del if/else.

El objetivo de este operador es mantener el código más fácil de leer y más fácil de escribir, pero si esto se convierte en un código demasiado grande y confuso, entonces considera utilizar la forma larga del if-else.

Por ejemplo este código funciona y es muy corto, pero también es muy difícil de leer.

int a = b > 10 ? c < 20 ? 50 : 80 : e == 2 ? 4 : 8;