Original article: How to Use the Ternary Operator in JavaScript – Explained with Examples

¿Estás cansado de declaraciones voluminosas sí o si no? El operador ternario de JavaScript ofrece una solución poderosa. Esta práctica herramienta le 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.

Esto es lo que cubriremos:

  1. ¿Qué es un operador ternario?
  2. Cómo utilizar el operador ternario
  3. Cómo refactorizar declaraciones if-else al operador ternario
  4. Cómo encadenar operadores ternarios
  5. Mejores prácticas al utilizar el operador ternario
  6. Conclusión

¿Qué es un 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:

conditionalExpression ? truthyValue : falsyValue

Según la sintaxis anterior, es condionalExpressionla expresión que sirve como punto de evaluación, determinando un valor verdadero o falso.

Después del ?(signo de interrogación), se devuelve el valor proporcionado 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.

El truthyValuey falsyValuepuede 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 utilizar el operador ternario

Ahora que hemos examinado la sintaxis y su funcionalidad, exploremos cómo utilizar el operador ternario para profundizar nuestra comprensión.

Considere 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 canAccessPlatform(age) {
  const shouldAccess = age >= 18 ? true : false;

  return shouldAccess;
}

A partir del fragmento de código anterior, creamos una función, canAccessPlatformque evalúa si un usuario, representado por su age parámetro, cumple con el requisito para acceder a la plataforma.

Utiliza un operador ternario para determinar si la edad es 18 o más, asignando truesi shouldAccessse cumple la condición y falseen caso contrario. Finalmente, devuelve el valor de shouldAccess, indicando si el usuario puede acceder a la plataforma o no.

Si la edad es 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 checkEvenOrOdd(number) {
  const result = number % 2 === 0 ? "even" : "odd";
  return result;
}

// Usage:
console.log(checkEvenOrOdd(4)); // Output: "even"
console.log(checkEvenOrOdd(7)); // Output: "odd"

Del fragmento de código anterior:

  • Definimos una función checkEvenOrOddque toma un numberparámetro.
  • 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 resultvariable.
  • Si la condición se evalúa como falsa (lo que significa que el número es impar), se asigna la cadena "impar" result.
  • Finalmente, la función devuelve el valor de result, 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 declaraciones if-else al 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 decideActivity(weather) {
  let activity;

  if (weather === "sunny") {
    activity = "go out";
  } else {
    activity = "stay in";
  }

  console.log(activity);
}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

Esta función, decideActivitytoma un weatherparámetro y determina la actividad adecuada en función de las condiciones climáticas.

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, al llamar decideActivity("raining")se obtendrá "permanecer en". Del mismo modo, decideActivity("snowing")también genera "permanecer en". Cuando decideActivity("sunny")se llama, 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 decideActivity(weather){
   const activity = weather === "sunny" ? "go out" ? "stay in";
   
   console.log(activity)

}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

Del ejemplo de código anterior, esta función decideActivityutiliza el operador ternario para determinar rápidamente la actividad en función de las condiciones climáticas. Comprueba si el tiempo es "soleado" y asigna "salir" si es cierto, en caso contrario "quedarse dentro".

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 checkNumber(number) {
  let result;
  if (number > 0) {
    result = "positive";
  } else {
    result = "non-positive";
  }
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

Expliquemos qué está haciendo el código anterior:

  • Definición de función : Comenzamos definiendo una función llamada checkNumberque toma un único parámetro llamado number.
  • Declaración de variable : dentro de la función, declaramos una variable nombrada resultsin 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 numberparámetro es mayor que 0.
  • Si la condición es verdadera (lo que significa que el número es positivo), asignamos la cadena "positiva" a la resultvariable.
  • Si la condición es falsa (lo que significa que el número no es positivo (lo que significa que es negativo o cero), asignamos la cadena "no positivo" a la resultvariable.
  • Declaración de devolución : finalmente, devolvemos el valor almacenado en la resultvariable.
  • Llamadas a funciones : luego llamamos a la checkNumberfunción dos veces con diferentes argumentos: 5 y -2.

Cuando llamamos checkNumber(5), la función devuelve "positivo", que luego se registra en la consola.

De manera similar, cuando llamamos checkNumber(-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 checkNumber(number) {
  const result = number > 0 ? "positive" : "non-positive";
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

¡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 checkNumber(5), devuelve "positivo", mientras que checkNumber(-2)devuelve "no positivo". En general, el operador ternario mejora la legibilidad del código.

Cómo encadenar 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 exampleFn() {
  return conditionalExpression1
    ? value1
    : conditionalExpression2
    ? value2
    : conditionalExpression3
    ? value3
    : value4;
}

Esto se puede traducir en una cadena if/else:

function exampleFn() {
  if (conditionalExpression1) {
    return value1;
  } else if (conditionalExpression2) {
    return value2;
  } else if (conditionalExpression3) {
    return value3;
  } else {
    return value4;
  }
}

Exploremos un ejemplo a continuación:

function checkNumber(number) {
  let message;

  if (number > 0) {
    message = "Positive";
  } else if (number === 0) {
    message = "Zero";
  } else {
    message = "Negative";
  }

  return message;
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

Este código anterior define una función llamada checkNumberque toma un numberparámetro 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 checkNumber(number) {
  return number > 0 ? "Positive" : number === 0 ? "Zero" : "Negative";
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

¡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 checkNumberfunción.

En el primer operador ternario:

  • La primera parte number > 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: number === 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: "Negative".
  • 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 getDrink(age) {
  return age >= 21
    ? "Enjoy a cocktail"
    : age >= 18
    ? "Have a beer"
    : age >= 16
    ? "Grab a soft drink"
    : "Sorry, you're too young to drink";
}

// Usage
console.log(getDrink(25)); // Output: "Enjoy a cocktail"
console.log(getDrink(19)); // Output: "Have a beer"
console.log(getDrink(16)); // Output: "Grab a soft drink"
console.log(getDrink(10)); // Output: "Sorry, you're too young to drink"

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 'Disfruta de un cóctel'. 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 else ifestructura de una if/elsedeclaración, lo que proporciona una forma concisa de manejar múltiples condiciones en JavaScript.

Mejores prácticas al utilizar 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.

  1. Manténgalo simple y legible : escriba expresiones concisas que sean fáciles de entender de un vistazo. Evite anidar demasiados operadores ternarios o escribir condiciones demasiado complejas.
  2. Úselo 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, considere usar if/elsedeclaraciones.
  3. Sepa cuándo usarlo : use el operador ternario cuando necesite 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.
  4. Pruebe minuciosamente : pruebe su código minuciosamente para asegurarse de que el operador ternario se comporte como se espera en diferentes condiciones. Verifique casos extremos y valide la exactitud de los valores asignados.
  5. Evite los ternarios anidados: si bien es posible encadenar ternarios, el anidamiento excesivo puede generar código difícil de leer. Prefiera claridad y considere usarlo if/elsepara condiciones complejas.
  6. Mantenga los ternarios breves: intente 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á 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 ha adquirido conocimientos valiosos que mejorarán sus prácticas de codificación utilizando el operador ternario.

¡Gracias por leer y hasta la próxima!

Información del contacto

¿Quieres ponerte en contacto conmigo? No dudes en comunicarte a través de cualquiera de los siguientes canales:

  • Twitter / X: @developeraspire
  • Correo electrónico: desarrolladoraspire5@gmail.com