Inicio Operador ternario en JavaScript

Operador ternario en JavaScript

Author: admin admin
mayo 17, 2024

La estructura if…else es fundamental para la lógica condicional, pero a veces puede resultar un poco verbosa para decisiones simples. JavaScript ofrece una alternativa más compacta y elegante para estos casos: el operador ternario.

Este operador es el único en JavaScript que toma tres operandos y nos permite evaluar una condición y elegir entre dos valores en una sola línea. En esta guía, exploraremos cómo funciona, cuál es su principal caso de uso y cómo emplearlo para escribir un código más limpio y legible.

¿Qué es el Operador Ternario?

El operador ternario es, en esencia, un atajo para una declaración if…else que asigna un valor a una variable. Su nombre “ternario” proviene de que opera sobre tres partes.

javascript
condición ? valorSiVerdadero : valorSiFalso;

Cómo funciona:

  1. condición: Se evalúa primero.
  2. Si la condición es true (o un valor truthy), la expresión completa se resuelve en valorSiVerdadero.
  3. Si la condición es false (o un valor falsy), la expresión se resuelve en valorSiFalso.

Ejemplo: De if…else a Ternario
Imagina que quieres determinar un mensaje de bienvenida basado en si un usuario ha iniciado sesión.

javascript
const isLoggedIn = true;
let message;

if (isLoggedIn) {
    message = "¡Bienvenido de vuelta!";
} else {
    message = "Por favor, inicia sesión.";
}

console.log(message); // "¡Bienvenido de vuelta!"

Con el Operador Ternario:

javascript
const isLoggedIn = true;
const message = isLoggedIn ? "¡Bienvenido de vuelta!" : "Por favor, inicia sesión.";

console.log(message); // "¡Bienvenido de vuelta!"

Como puedes ver, el operador ternario reduce 5 líneas de código a una sola, haciendo la asignación condicional mucho más concisa.

El Principal Caso de Uso: Asignación Condicional

El propósito fundamental y el mejor uso del operador ternario es asignar un valor a una variable basado en una condición. Es aquí donde brilla por su claridad y brevedad.

Ejemplo: Asignar una tarifa

javascript
const isMember = false;
const fee = isMember ? "$2.00" : "$10.00";

console.log(`La tarifa de entrada es: ${fee}`); // La tarifa de entrada es: $10.00

Ejemplo: Determinar una clase CSS
Es muy común en frameworks de frontend como React para aplicar clases condicionalmente.

javascript
const isActive = true;
const buttonClass = `btn ${isActive ? 'btn-active' : 'btn-inactive'}`;

console.log(buttonClass); // "btn btn-active"

Múltiples operadores ternarios de JavaScript:

El siguiente ejemplo muestra cómo utilizar dos operadores ternarios en la misma expresión:

javascript
const speed = 90;
const message = speed >= 120 ? 'Muy Rápido' : speed >= 80 ? 'Rápido' : 'OK';

console.log(message);

Al establecer speed en 90, el código evalúa si esta velocidad es mayor o igual a 120 para asignar ‘Muy Rápido’, lo cual no es el caso. Luego verifica si speed es mayor o igual a 80 y dado que 90 cumple con esta condición, asigna ‘Rápido’ a message. Si speed hubiera sido menor que 80 entonces message habría sido ‘OK’.

Antipatrones: ¿Cuándo NO Usar el Operador Ternario?

El poder del ternario es también su debilidad: su concisión puede llevar a un código difícil de leer si se abusa de él.

1. Para ejecutar múltiples operaciones

El ternario no está diseñado para ejecutar bloques de código complejos. Si necesitas hacer más que asignar un valor, un if...else es mucho más claro.

Mala práctica (difícil de leer):

javascript
const isAuthenticated = true;
isAuthenticated
    ? (console.log("Acceso concedido"), redirectToDashboard())
    : (console.log("Acceso denegado"), redirectToLogin());

Buena práctica (claro y mantenible):

javascript
const isAuthenticated = true;
if (isAuthenticated) {
    console.log("Acceso concedido");
    redirectToDashboard();
} else {
    console.log("Acceso denegado");
    redirectToLogin();
}

2. Anidando Operadores Ternarios

Técnicamente, puedes anidar ternarios para simular una estructura else if, pero el resultado es casi siempre un código ilegible y propenso a errores.

Mala práctica (anidado y confuso):

javascript
const score = 75;
const grade = score > 90 ? "A" : score > 80 ? "B" : score > 70 ? "C" : "D";

console.log(grade); // "C"

Buena práctica (claro y secuencial):

javascript
const score = 75;
let grade;

if (score > 90) {
    grade = "A";
} else if (score > 80) {
    grade = "B";
} else if (score > 70) {
    grade = "C";
} else {
    grade = "D";
}
console.log(grade); // "C"

Claridad sobre Concisión

La pregunta clave que debes hacerte antes de usar un operador ternario es: “¿Hace esto mi código más fácil de entender?”

  • Sí, úsalo: Si estás realizando una asignación simple basada en una condición (ej. const valor = condicion ? ‘A’ : ‘B’;).
  • No, evítalo: Si la lógica es compleja, involucra múltiples pasos o requiere anidamiento. En esos casos, un if…else tradicional es siempre la mejor opción.

Conclusión

El operador ternario ( ? : ) es una herramienta elegante y poderosa en JavaScript para simplificar las asignaciones condicionales. Cuando se usa para su propósito principal, puede hacer que tu código sea más conciso y expresivo. Sin embargo, es fundamental usarlo con moderación y priorizar siempre la legibilidad. Para lógica compleja, las estructuras if…else o switch siguen siendo las opciones más claras y mantenibles.

Para lógica compleja, considere usar estructuras más claras como if…else o switch que nos permiten que hacer que el código sea mas claro y mantenible.

+1
0
+1
0