¿Está cansado de repetirse mientras codifica? ¿Todavía usas los bloques tradicionales ‘si else else’? ¿Y si te lo dijera, podrías escribir 15 líneas de código en 4 líneas? Llame al 1-800-OPERADORES TERNARIOS ahora.
Los operadores ternarios son la versión abreviada de las sentencias if else else. Es el único operador condicional en JavaScript que toma tres operandos.
La sintaxis básica para operadores ternarios es
¿condición ? expresión1 : expresión2
- donde la condición es el valor a probar / evaluar,
- expresión1 puede ser valor(s) de cualquier tipo a ejecutar si la condición es verdadera
- expresión2 puede ser valor(s) de cualquier tipo a ejecutar si expresión1 es falso, es decir, un valor de reserva comúnmente conocido como ‘else’
- «? «significa «si», y » : «significa » más»
Veamos un ejemplo
Si tuviéramos que determinar si a uno se le permite conducir por su edad, usando las sentencias if else else-se ve algo como esto
var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"
Usando operadores ternarios, el mismo código se verá como esto
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
¡Listo! Este bloque de código se traducirá a SI la variable ‘edad’ es mayor o igual a 16, el navegador debería alertar ‘¡Se le permite conducir!¡Si NO, deberías tener 16 años para conducir! debería estar alerta.
Otra razón para adoptar ternary, es su flexibilidad y tamaño en miniatura que podría caber en cualquier lugar de su código. Por ejemplo, si desea adjuntar el resultado de su cadena directamente a una cadena, puede hacerlo fácilmente sin tener que declarar su condición por separado.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
SI isMember es verdadero ,’ La tarifa es de $2.00′, DE lo contrario,’La tarifa es de $10.00′.
¿Adivina qué?! También puede asignar los resultados de las operaciones ternarias a variables. Usemos el mismo ejemplo de conducción que usamos antes.
var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"
En este ejemplo, guardamos el resultado en una variable y luego lo mostramos en la consola.
Hay tantas posibilidades en operadores ternarios como en el bloque tradicional if else else. Se pueden encadenar varios operadores ternarios para formar lo que llamamos bloque» IF ELSE ELSE IF ELSE ELSE».
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
El bloque de código anterior se traducirá si el año es menor que 2018, el navegador debe alertar ‘Demasiado pronto’, o de lo contrario, si el año es mayor que 2018, se mostrará ‘Demasiado tarde’, de lo contrario, si no es mayor o menor que, es decir, igual a, entonces se mostrará ‘Exactamente’.
También puede tener instrucciones if anidadas:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
Nuestros ojos escanean los códigos verticalmente, las hendiduras y los espacios desempeñan una gran función para ayudarnos a leer los códigos fácilmente. No están excluidos en ternary, y los espacios libres no afectan su código.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
El código anterior funcionará tan bien como cualquier evaluación ternaria o cualquier operación if else else.
También es posible tener varias operaciones por caja, y separarlas con una coma.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);
También puede tener varias operaciones y asignar los valores a una variable. El último valor separado por comas se asignará a la variable.
var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'),
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"
Por último, pero no menos importante, las operaciones ternarias se pueden usar para devolver valores en funciones. Por ejemplo, si escribiéramos una función para devolver un valor para determinar si Chris Pratt es miembro del Universo Marvel o no;
var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Observe que usamos return varias veces y tuvimos que escribir la instrucción if else else e incrustar sus valores en corchetes, etc., lo cual es genial. Pero se puede acortar usando operadores ternarios. El mismo código anterior se evaluará como tal en la operación ternaria;
var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
Nota: Todas las variables utilizadas en una operación ternaria deben definirse antes de crear la operación.
Si llegaste hasta aquí, ¡gracias!
Siéntase libre de agregarme en Twitter y en Instagram