JavaScript Operadores ternarios


Ejemplo

Se puede utilizar para acortar las operaciones if / else. Esto es útil para devolver un valor rápidamente (es decir, para asignarlo a otra variable).

Por ejemplo:

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

En este caso, el result obtiene el valor 'lindo', porque el valor del animal es 'gatito'. Si el animal tuviera otro valor, el resultado obtendría el valor "todavía agradable".

Compare esto con lo que le gustaría al código if/else condiciona.

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

Las condiciones if o else pueden tener varias operaciones. En este caso, el operador devuelve el resultado de la última expresión.

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

Debido a que a era igual a 0, se convierte en 1 y str convierte en 'no una prueba'. La operación que involucró a str fue la última, por lo que b recibe el resultado de la operación, que es el valor contenido en str , es decir, "no es una prueba".

Los operadores ternarios siempre esperan otras condiciones, de lo contrario obtendrá un error de sintaxis. Como solución alternativa, podría devolver un cero algo similar en la rama else: esto no importa si no está utilizando el valor de retorno, sino simplemente acortando (o intentando acortar) la operación.

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

Como ve, if (a === 1) alert('Hey, it is 1!'); Haría lo mismo. Sería sólo un carbón más tiempo, ya que no necesita una obligatoria else condiciones. Si se tratara de else condición, el método ternario sería mucho más limpio.

a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');

Los ternarios se pueden anidar para encapsular lógica adicional. Por ejemplo

foo ? bar ? 1 : 2 : 3

// To be clear, this is evaluated left to right 
// and can be more explicitly expressed as:

foo ? (bar ? 1 : 2) : 3

Esto es lo mismo que lo siguiente if/else

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

Estilísticamente, esto solo debe usarse con nombres cortos de variables, ya que los ternarios multilínea pueden disminuir drásticamente la legibilidad.

Las únicas declaraciones que no se pueden usar en los ternarios son las declaraciones de control. Por ejemplo, no puede usar return o break con ternaries. La siguiente expresión no será válida.

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

Para declaraciones de devolución, lo siguiente también sería inválido:

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

Para hacer lo anterior correctamente, devolvería el ternario de la siguiente manera:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';