Codificación aprenderaprogramar.com: CU01152E
OPERADOR CONDICIONAL TERNARIO
Para escribir condicionales la estructura básica de lenguajes como JavaScript, Java, PHP y otros es la sentencia if. Otro tipo de condicionales como el switch o el else if pueden ser reemplazados por if. Hay otra sintaxis de condicional que se denomina operador condicional ternario y que se escribe con expresiones que incluyen una interrogación y dos puntos como: a ? b : c;
La sintaxis y significado del operador condicional ternario (válida para diferentes lenguajes, como JavaScript, Java, PHP, etc.) es la siguiente:
|
expresiónConValorBooleano ? expresión1 : expresión2; Interpretación: si la expresiónConValorBooleano es cierta se ejecuta la expresión1, y en caso contrario se ejecuta la expresión2. |
Ejemplos. Supongamos que tenemos cuatro variables: A = 5, B = 3, C = -7 y D = 5
|
Expresión |
Resultado |
|
A==5 ? dispara(): espera(); |
Se ejecuta dispara() |
|
A<B ? dispara(): espera(); |
Se ejecuta espera() |
|
B<C ? dispara(): espera(); |
Se ejecuta espera() |
|
A<B && B>C ? dispara(): espera(); |
Se ejecuta espera() |
|
A<B && B>C || B==3 ? dispara(): espera(); |
Se ejecuta dispara() |
|
A==5 ? A=20: A=1; |
Si A valía 5 ahora vale 20, caso contrario ahora vale 1. |
|
B = B==3 ? B*10: B*100; |
Se trata de una asignación: si B valía 3, ahora B vale 10 veces lo que valía, caso contrario ahora B vale 100 veces lo que valía. |
El operador ternario puede ser insertado en sentencias de ejecución donde no se permite la inserción de if, por ejemplo en una operación de asignación o en la variable de control de un bucle for. Por ejemplo for (var i = A==5 ? k(): t(); i<8; i++) implica que el bucle comienza con i valiendo lo que retorne la función k() si A vale 5, o lo que retorne la función t si A no vale 5.
Usar el operador condicional ternario tiene ventajas e inconvenientes.
VENTAJAS E INCONVENIENTES DEL OPERADOR CONDICIONAL TERNARIO
En la siguiente tabla resumimos las ventajas e inconvenientes del operador condicional ternario comparándolo con el if tradicional.
|
Condicional ternario |
If tradicional |
|
Permite la escritura compacta, permitiendo ahorrar escritura de código. |
Obliga a escribir más sentencias para conseguir el mismo resultado. |
|
Resulta más difícil de leer, entender y depurar |
Resulta más fácil de leer, entender y depurar |
|
No todos los programadores lo usan, algunos ni siquiera lo conocen. |
Todos los programadores lo usan y lo conocen. |
|
Se admite en la sintaxis de los lenguajes en lugares donde no se admite la sentencia if |
No es válido en ciertas ubicaciones donde sólo se admiten expresiones, pero puede hacerse la evaluación antes del punto donde sea necesario el condicional. |
|
Criticado por algunos expertos, adorado por otros |
Uso y aceptación cuasi-universal |
EJEMPLOS DE USO EN JAVASCRIPT
Escribe este código, guárdalo como archivo html y comprueba los resultados de ejecución. Razona sobre los resultados obtenidos y trata de explicar paso a paso la lógica de todo lo que hace el código.
|
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemplo() { var A=5; var B=3; C=-7; D=5; var msg = ''; A==5 ? msg=msg+'A es 5\n': msg=msg+'A no es 5\n'; A<B ? msg=msg+'A es menor que B\n': msg=msg+'B es mayor o igual que A\n'; B<C ? msg=msg+'B es menor que C\n': msg=msg+'C es mayor o igual que B\n'; A<B && B>C ? msg=msg+'Se cumple A<B y B>C\n': msg=msg+'No se cumple A<B y B>C\n'; A<B && B>C || B==3 ? msg=msg+'Se cumple la condición\n': msg=msg+'No se cumple la condición\n'; A==5 ? A=20: msg=msg+'A no es 5\n'; msg = msg + 'Si A valía 5 ahora A vale 20, si no sigue valiendo lo que valía\n'; msg = msg + 'Ahora A vale '+A+'\n'; A==5 ? k(): t(); B = B==3 ? B*10: B*100; msg = msg + 'Después de ejecutar B = B==3 ? B*10: B*100; resulta que B vale ' + B + '\n'; for (var i = A==5 ? k(): t(); i<8; i++) { msg = msg + 'Bucle: '+i+' \n'; } alert(msg); } function k() {alert('Ha Sido llamada la función k'); return 3;} function t() {alert('Ha Sido llamada la función t'); return 5;} </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div> </body> </html> |
El resultado esperado es:
Ha sido llamada la función t >> Ha sido llamada la función t >> A es 5 >> B es mayor o igual que A >> C es mayor o igual que B
No se cumple A<B y B>C >> Se cumple la condición >>Si A valía 5 ahora A vale 20, si no sigue valiendo lo que valía
Ahora A vale 20 >> Después de ejecutar B = B==3 ? B*10: B*100; resulta que B vale 30
Bucle: 5 >> Bucle: 6 >> Bucle: 7
EJERCICIO
Ejecuta este script y responde a las siguientes preguntas (algunas de ellas corresponden a cuestiones que hemos visto a lo largo del curso):
a) ¿Qué significa el operador += que se emplea en el código?
b) ¿Por qué usamos [0] para establecer nodoBody?
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
e) Modifica el código para que usando el operador ternario, si el usuario no introduce como color red, yellow o blue aparezca el mensaje ‘No eligió color o el color es no válido’
f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.
|
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <script type="text/javascript"> function ejemplo() { var htmlADevolver = ''; var colorUsuario = prompt('Elija color red, yellow o blue'); htmlADevolver += colorUsuario ? '<h1 style="background-color:'+colorUsuario+ ';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>'; var nodoBody = document.getElementsByTagName('body')[0]; nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver; } </script> </head> <body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div> <div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div> </body> </html> |
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
