¿Estás cansado de sentencias robustas de if-else? El operador ternario de JavaScript ofrece una solución poderosa. Esta herramienta práctica te permite condensar lógica condicional compleja en una sola línea, haciendo que su código sea más limpio, elegante y eficiente.
En este artículo, profundizaremos en el operador ternario, comprenderemos su sintaxis y mostraremos ejemplos del mundo real para ayudarlo a comprender cómo funciona para aprovechar todo su potencial.
¿Qué es el operador ternario?
Un operador ternario es un operador condicional en JavaScript que evalúa una expresión condicional y devuelve un valor verdadero o falso.
Para entender cómo funciona esto, echemos un vistazo más de cerca a su sintaxis a continuación:
expresionCondicional ? valorVerdadero : valorFalsoSegún la sintaxis anterior, expresionCondicional es la expresión que sirve como punto de evaluación, determinando un valor verdadero o falso.
Siguiendo el ? (signo de interrogación), el valor proporcionado se devuelve en caso de que la expresión se evalúe como verdadera, mientras que el valor que sigue a : (dos puntos) se devuelve si la expresión da como resultado un resultado falso.
valorVerdadero y valorFalso pueden ser cualquier cosa en JavaScript. Puede abarcar varias entidades como funciones, valores almacenados en variables, objetos, números, cadenas y más. El operador ternario le otorga la flexibilidad de devolver cualquier valor deseado, ofreciendo versatilidad en su código.
¿Cómo usar el operador ternario?
Ahora que hemos examinado la sintaxis y su funcionalidad, exploremos cómo utilizar el operador ternario para profundizar nuestra comprensión.
Considera este escenario: estamos creando una plataforma de juegos que solo permite usuarios mayores de 18 años. Diseñaremos una función para comprobar la edad de un usuario. Si son menores de 18 años, se les negará el acceso; de lo contrario, podrán acceder a la plataforma.
function puedeAccederPlataforma(edad) {
const deberiaAcceder = edad >= 18 ? true : false;
return deberiaAcceder;
}A partir del fragmento de código anterior, creamos una función, puedeAccederPlataforma, que evalúa si un usuario, representado por su parámetro de edad, cumple con los requisitos para acceder a la plataforma.
Utiliza un operador ternario para determinar si la edad es 18 años o más, asignando true (verdadero) a la variable deberiaAcceder si se cumple la condición y false (falso) en caso contrario. Finalmente devuelve el valor deberiaAcceder, indicando si el usuario puede acceder a la plataforma o no.
Si la edad es de 18 años o más, la expresión se vuelve verdadera, por lo que el operador devuelve verdadero después de ?. De lo contrario, devuelve falso. Este resultado se guarda en una variable y luego se devuelve desde la función.
Si bien este caso de uso básico simplifica el código y mejora la legibilidad al reemplazar bloques if-else innecesarios, es importante usarlo con moderación para evitar saturar y complicar el código. Más adelante, analizaremos las mejores prácticas para utilizar el operador ternario.
Aquí hay otro ejemplo que ilustra el uso del operador ternario. Crearemos una función para determinar si un número es par o impar. Consulte el fragmento de código a continuación:
function verificaParOImpar(numero) {
const resultado = numero % 2 === 0 ? "par" : "impar";
return resultado;
}
// Uso:
console.log(verificaParOImpar(4)); // Salida: "par"
console.log(verificaParOImpar(7)); // Salida: "impar"Del fragmento de código anterior:
- Definimos una función
verificaParOImparque toma un parámetro numérico. - Dentro de la función usamos el operador ternario para comprobar si el número es par o impar.
- Si el número módulo 2 es igual a 0 (lo que significa que es divisible por 2 sin resto), entonces la condición se evalúa como verdadera y la cadena "par" se asigna a la variable de
resultado. - Si la condición se evalúa como falsa (lo que significa que el número es impar), se asigna la cadena "impar" al
resultado. - Finalmente, la función devuelve el valor del
resultado, que indica si el número es par o impar.
Este código muestra cómo el operador ternario verifica rápidamente si un número es par o impar, lo que hace que el código sea más fácil de leer y comprender.
¿Cómo refactorizar sentencias if-else con el operador ternario?
Una ventaja del operador ternario es evitar bloques if-else innecesarios que pueden complicar la legibilidad y el mantenimiento del código. En esta sección, refactorizaremos algunas declaraciones if-else en operaciones ternarias, brindando una comprensión más clara de cómo usar operadores ternarios de manera efectiva.
Comencemos con nuestro primer ejemplo:
function decidirActividad(clima) {
let actividad;
if (clima === "soleado") {
actividad = "salir";
} else {
actividad = "quedarse en casa";
}
console.log(actividad);
}
// Uso
console.log(decidirActividad("lloviendo")); // Salida: "quedarse en casa"
console.log(decidirActividad("nevando")); // Salida: "quedarse en casa"
console.log(decidirActividad("soleado")); // Salida: "salir"Esta función, decidirActividad toma un parámetro clima y determina la actividad adecuada en función de las condiciones meteorológicas.
Si el tiempo es "soleado", sugiere "salir". En caso contrario, aconseja "quedarse en casa". Cuando llamamos a la función con diferentes condiciones climáticas como "lloviendo" o "nevando", genera la recomendación de actividad correspondiente usando console.log().
Por ejemplo, llamar a decidirActividad("lloviendo") generará "quedarse en casa". De manera similar, decidirActividad("nevando") también genera "quedarse en casa". Cuando se llama a decidirActividad("soleado"), el resultado es "salir". Esta sencilla función ayuda a decidir actividades en función de las condiciones climáticas proporcionadas.
Ahora podemos refactorizar estos bloques de código para que parezcan más simples y ordenados. Veamos cómo hacerlo a continuación:
function decidirActividad(clima){
const actividad = clima === "soleado" ? "salir" ? "quedarse en casa";
console.log(actividad)
}
// Uso
console.log(decidirActividad("lloviendo")); // Salida: "quedarse en casa"
console.log(decidirActividad("nevando")); // Salida: "qeudarse en casa"
console.log(decidirActividad("soleado")); // Salida: "salir"Según el ejemplo de código anterior, esta función, decidirActividad, utiliza el operador ternario para determinar rápidamente la actividad según las condiciones climáticas. Comprueba si el tiempo es "soleado" y asigna "salir" si es cierto, en caso contrario "quedarse en casa".
Hemos simplificado las declaraciones if-else en un operador ternario de una sola línea. Esto hace que nuestro código sea más limpio, claro y fácil de leer.
Echemos un vistazo a otro ejemplo:
function verificarNumero(numero) {
let resultado;
if (numero > 0) {
resultado = "positivo";
} else {
resultado = "no-positivo";
}
return resultado;
}
// Uso
console.log(verificarNumero(5)); // Salida: "positivo"
console.log(verificarNumero(-2)); // Salida: "no-positivo"Expliquemos qué está haciendo el código anterior:
- Definición de función: comenzamos definiendo una función llamada
verificarNumeroque toma un único parámetro llamadonumero. - Declaración de variable: Dentro de la función, declaramos una variable llamada
resultadosin asignarle ningún valor todavía. Esta variable almacenará el resultado de nuestra verificación. - Declaración condicional (
if-else): Tenemos una declaración condicional que verifica si el parámetronumeroes mayor que 0. - Si la condición es verdadera (lo que significa que el número es positivo), asignamos la cadena "positivo" a la variable de
resultado. - Si la condición es falsa (lo que significa que el número no es positivo sino que es negativo o cero), asignamos la cadena "no-positivo" a la variable de
resultado. - Declaración de devolución: finalmente, devolvemos el valor almacenado en la variable de resultado.
- Llamadas a funciones: luego llamamos a la función
verificarNumerodos veces con diferentes argumentos: 5 y -2.
Cuando llamamos a verificarNumero(5), la función devuelve "positivo", que luego se registra en la consola.
De manera similar, cuando llamamos a verificarNumero(-2), la función devuelve "no-positivo", que nuevamente se registra en la consola.
Esta función determina de manera eficiente si un número es positivo o no positivo y proporciona el resultado apropiado según la condición.
Simplifiquemos y mejoremos el código reescribiéndolo usando un operador ternario.
function verificarNumero(numero) {
const resultado = numero > 0 ? "positivo" : "no-positivo";
return resultado;
}
// Uso
console.log(verificarNumero(5)); // Salida: "positivo"
console.log(verificarNumero(-2)); // Salida: "no-positivo"¡Gran trabajo! Al refactorizar la función y utilizar el operador ternario para la evaluación condicional, logramos un código más limpio, conciso y legible.
Este código, que utiliza el operador ternario, parece más conciso y elegante. Determina de manera eficiente si un número es positivo o no positivo, lo que hace que el código sea más limpio y fácil de entender. Cuando llamamos a checkNumber(5), devuelve "positivo", mientras que checkNumber(-2) devuelve "no- positivo". En general, el operador ternario mejora la legibilidad del código.
¿Cómo anidar operadores ternarios?
Cuando se trata de controles condicionales, a veces una sola condición no es suficiente. En tales casos, utilizamos declaraciones else-if junto con if/else para incorporar múltiples condiciones.
Echemos un vistazo a la sintaxis:
function funcionEjemplo() {
return expresionCondicional1
? valor1
: expresionCondicional2
? valor2
: expresionCondicional3
? valor3
: valor4;
}Esto se puede traducir en una cadena if/else:
function funcionEjemplo() {
if (expresionCondicional1) {
return valor1;
} else if (expresionCondicional2) {
return valor2;
} else if (expresionCondicional3) {
return valor3;
} else {
return valor4;
}
}Exploremos un ejemplo a continuación:
function verificarNumero(numero) {
let mensaje;
if (numero > 0) {
mensaje = "Positivo";
} else if (numero === 0) {
mensaje = "Cero";
} else {
mensaje = "Negativo";
}
return mensaje;
}
// Uso
console.log(verificarNumero(5)); // Salida: "Positivo"
console.log(verificarNumero(0)); // Salida: "Cero"
console.log(verificarNumero(-3)); // Salida: "Negativo"Este código anterior define una función llamada verificarNumero que toma un parámetro numero y determina su estado (positivo, cero o negativo). Utiliza un bloque if-else con una declaración else-if para evaluar el valor del número. Si el número es mayor que 0 se considera positivo y si es igual a 0 es cero. De lo contrario, es negativo. La función devuelve el resultado.
Refactoricemos este código usando un operador ternario para lograr la misma funcionalidad.
function verificarNumero(numero) {
return numero > 0 ? "Positivo" : numero === 0 ? "Cero" : "Negativo";
}
// Uso
console.log(verificarNumero(5)); // Salida: "Positivo"
console.log(verificarNumero(0)); // Salida: "Cero"
console.log(verificarNumero(-3)); // Salida: "Negativo"¡Eso es todo! Hemos refactorizado la función y, tras un examen más detenido, podemos observar que los operadores están encadenados. Ahora, exploremos cómo funciona el operador ternario encadenado en la función verificarNumero.
En el primer operador ternario:
- La primera condición
numero > 0comprueba si el número es mayor que 0. - Si es verdadero, la expresión devuelve "Positivo".
En el segundo operador ternario (encadenado):
- Si la primera condición es falsa (lo que significa que el número no es mayor que 0), pasa a la siguiente parte de la expresión:
número === 0. - Esta parte comprueba si el número es igual a 0.
- Si es verdadera, la expresión devuelve "Cero".
Y el valor predeterminado:
- Si ninguna de las condiciones anteriores es verdadera (lo que significa que el número no es mayor que 0 ni igual a 0), el valor predeterminado es la última parte de la expresión: "Negativo".
- Esta parte actúa como valor predeterminado si no se cumple ninguna de las condiciones anteriores.
En resumen, el operador ternario encadenado evalúa múltiples condiciones en una sola línea de código. Comprueba cada condición secuencialmente y la primera condición que se evalúa como verdadera determina el resultado de toda la expresión. Esto permite una lógica condicional concisa y eficiente.
Examinemos otro ejemplo de operador ternario encadenado.
function obtenerBebida(edad) {
return edad >= 21
? "Disfrute su coctel"
: edad >= 18
? "Toma una cerveza"
: edad >= 16
? "Toma un refresco"
: "Disculpa, tu no puedes beber";
}
// Uso
console.log(obtenerBebida(25)); // Salida: "Disfrute su coctel"
console.log(obtenerBebida(19)); // Salida: "Toma una cerveza"
console.log(obtenerBebida(16)); // Salida: "Toma un refresco"
console.log(obtenerBebida(10)); // Salida: "Disculpa, tu no puedes beber"En el ejemplo de código proporcionado, los operadores ternarios están encadenados para proporcionar diferentes sugerencias de bebidas según la edad proporcionada. Cada expresión condicional de la cadena evalúa un rango de edad específico.
Si la primera condición es verdadera (verdadera), devuelve 'Disfrute su coctel'. Si es falso (falso), pasa a la siguiente expresión condicional, y así sucesivamente. Este proceso de encadenamiento continúa hasta que una condición se evalúa como verdadera. Si ninguna de las condiciones de la cadena es verdadera, el último valor se devuelve como alternativa, similar al bloque "else" en una declaración if/else.
El concepto de "encadenar" operadores ternarios implica vincular expresiones condicionales en función del valor de la expresión anterior. Esto se puede comparar con la estructura else-if en una declaración if/else, lo que proporciona una forma concisa de manejar múltiples condiciones en JavaScript.
Buenas prácticas cuando usamos el operador ternario
El uso eficiente del operador ternario puede mejorar significativamente la legibilidad y la concisión del código. En esta sección, exploraremos las mejores prácticas clave para utilizar el operador ternario de manera efectiva.
- Manténlo simple y legible: escribe expresiones concisas que sean fáciles de entender de un vistazo. Evita anidar demasiados operadores ternarios o escribir condiciones demasiado complejas.
- Úsalo para asignaciones simples: los operadores ternarios son ideales para asignaciones simples donde solo hay dos resultados posibles según una condición. Para escenarios más complejos, considera usar declaraciones
if/else. - Sepa cuándo usarlo: usa el operador ternario cuando necesitas realizar una verificación condicional simple y asignar un valor según el resultado. Es particularmente útil para asignar valores predeterminados o determinar el valor de una variable en función de una condición.
- Pruebe minuciosamente: prueba tu código minuciosamente para asegurarse de que el operador ternario se comporte como se espera en diferentes condiciones. Verifica casos extremos y valida la exactitud de los valores asignados.
- Evite los ternarios anidados: si bien es posible encadenar ternarios, el anidamiento excesivo puede generar código difícil de leer. Elige claridad y considera usar
if/elsepara condiciones complejas. - Mantén los ternarios breves: intenta mantener las expresiones ternarias breves y concisas. Los ternarios largos pueden ser difíciles de leer y comprender, lo que genera desafíos de mantenimiento del código.
Estas mejores prácticas describen pautas para utilizar eficazmente el operador ternario. Si bien no son reglas estrictas, ofrecen información valiosa para mejorar la claridad y legibilidad de su código.
Conclusión
Al concluir este artículo, obtendrás una comprensión integral del operador ternario: su aplicación en tareas diarias de codificación, conversión de declaraciones if/else, operadores de encadenamiento y mejores prácticas. Estoy seguro de que has adquirido conocimientos valiosos que mejorarán tus prácticas de codificación utilizando el operador ternario.
¡Gracias por leer y hasta la próxima!
Contacto de información
¿Quieres ponerte en contacto conmigo? No dudes en comunicarte a través de cualquiera de los siguientes canales:
- Twitter / X: @developeraspire
- Email: developeraspire5@gmail.com