Operador condicional (ternario)

El operador condicional (ternario) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción if.
 

Sintaxis

condición ? expr1 : expr2 

Parámetros

condición
Una expresión que se evalúa como true o false.
expr1, expr2
Expresión con valores de algún tipo.

Descripción

Si la condición es true, el operador retorna el valor de la expr1; de lo contrario,  devuelve el valor de expr2. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable isMember, se puede usar esta declaración:

"La Cuota es de:  " + (isMember ? "$2.00" : "$10.00")

También puedes asignar variables dependiendo del resultado de la condición ternaria:

var elvisLives = Math.PI > 4 ? "Sip" : "Nop";

También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):

var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? "Acceso Denegado" : secondCheck ? "Acceso Denegado" : "Acceso Permitido";
  
console.log( access ); // muestra "Acceso Permitido"

También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:

var stop = false, age = 16;

age > 18 ? location.assign("continue.html") : stop = true;

También puede realizar más de una operación por caso, separándolas con una coma:

var stop = false, age = 23;

age > 18 ? (
    alert("OK, puedes continuar."),
    location.assign("continue.html")
) : (
    stop = true,
    alert("Disculpa, eres menor de edad!")
);

También puede realizar más de una operación durante la asignación de un valor. En este caso, el último valor separado por una coma del paréntesis será el valor asignado.

var age = 16;

var url = age > 18 ? (
    alert("OK, puedes continuar."), 
    // alert devuelve "undefined", pero será ignorado porque
    // no es el último valor separado por comas del paréntesis
    "continue.html" // el valor a ser asignado si age > 18
) : (
    alert("Eres menor de edad!"),
    alert("Disculpa :-("),
    // etc. etc.
    "stop.html" // el valor a ser asignado si !(age > 18)
);

location.assign(url); // "stop.html"

Especificaciones

Especificación Estado Comentario
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Conditional Operator' in that specification.
Standard  
ECMAScript 5.1 (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard  
ECMAScript 1st Edition (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard Definición inicial implementada en JavaScript 1.0.

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Véase también

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: mauroflamig, osmar-vil, maedca, CesarBustios, eacp, cornezuelo, joeljose
 Última actualización por: mauroflamig,