Ir al contenido principal

Operador ternario

Introducción

El operador ternario es una forma concisa de escribir expresiones condicionales en JavaScript. Se trata del único operador en JavaScript que toma tres operandos, de ahí su nombre "ternario". Este operador nos permite evaluar una condición y devolver un valor u otro dependiendo del resultado de dicha evaluación, todo en una sola línea de código. Es especialmente útil cuando necesitamos asignar valores a variables o devolver valores desde funciones basados en condiciones simples.

Sintaxis del operador ternario

La sintaxis básica del operador ternario es la siguiente:

condicion ? expresion1 : expresion2

Su funcionamiento es sencillo:

  • Primero se evalúa la condicion
  • Si la condición es verdadera (truthy), se ejecuta y devuelve el valor de expresion1
  • Si la condición es falsa (falsy), se ejecuta y devuelve el valor de expresion2

Veamos un ejemplo básico:

const edad = 20;
const mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad";
console.log(mensaje); // Muestra: "Eres mayor de edad"

En este ejemplo:

  1. Evaluamos si edad es mayor o igual a 18
  2. Como la condición es verdadera, el operador ternario devuelve "Eres mayor de edad"
  3. Este valor se asigna a la variable mensaje

Comparación con if/else tradicional

Para entender mejor el operador ternario, podemos compararlo con su equivalente usando la estructura if/else:

// Usando if/else
let mensaje;
if (edad >= 18) {
    mensaje = "Eres mayor de edad";
} else {
    mensaje = "Eres menor de edad";
}

// Usando operador ternario
const mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad";

Como podemos observar, el operador ternario nos permite reducir varias líneas de código a una sola expresión más compacta. Esta concisión es una de sus principales ventajas.

Casos de uso apropiados

El operador ternario es especialmente útil en las siguientes situaciones:

1. Asignación condicional de valores

const temperaturaCelsius = 22;
const sensacionTermica = temperaturaCelsius <= 15 ? "Hace frío" : "Hace calor";

2. Operadores ternarios en retorno de funciones

function saludar(hora) {
    return hora < 12 ? "Buenos días" : "Buenas tardes";
}

console.log(saludar(10)); // Muestra: "Buenos días"
console.log(saludar(15)); // Muestra: "Buenas tardes"

3. Como parte de plantillas literales

const puntuacion = 85;
console.log(`Has ${puntuacion >= 60 ? "aprobado" : "suspendido"} el examen.`);
// Muestra: "Has aprobado el examen."

4. Para establecer valores predeterminados

function configurarOpciones(opciones) {
    const configuracion = {
        color: opciones.color ? opciones.color : "negro",
        tamano: opciones.tamano ? opciones.tamano : "mediano",
        visible: opciones.visible !== undefined ? opciones.visible : true
    };
    return configuracion;
}

Anidación de operadores ternarios

Es posible anidar operadores ternarios para manejar múltiples condiciones, aunque esto puede afectar la legibilidad del código:

const puntuacion = 85;
const resultado = puntuacion >= 90 ? "Sobresaliente" 
                : puntuacion >= 70 ? "Notable"
                : puntuacion >= 60 ? "Bien"
                : puntuacion >= 50 ? "Suficiente"
                : "Insuficiente";

console.log(resultado); // Muestra: "Notable"

En este ejemplo estamos evaluando múltiples rangos de puntuación y asignando un resultado según el rango en el que se encuentre la puntuación.

La estructura se evalúa de la siguiente manera:

  1. ¿Es puntuacion mayor o igual a 90? Si es así, devuelve "Sobresaliente", si no, continúa.
  2. ¿Es puntuacion mayor o igual a 70? Si es así, devuelve "Notable", si no, continúa.
  3. Y así sucesivamente hasta la última condición.

Buenas prácticas y limitaciones

Aunque el operador ternario puede hacer nuestro código más conciso, es importante usarlo adecuadamente:

Buenas prácticas:

  1. Usar para expresiones simples: El operador ternario funciona mejor con condiciones simples y opciones de retorno sencillas.

  2. Mantener la legibilidad: Si la expresión se vuelve demasiado compleja, considera usar un if/else tradicional.

  3. Formatear correctamente: Al anidar operadores ternarios, usa una buena indentación y formato para mantener el código legible.

// Buena práctica
const mensaje = edad >= 18 
    ? "Eres mayor de edad" 
    : "Eres menor de edad";
  1. Evitar efectos secundarios: El operador ternario debería usarse principalmente para determinar valores, no para ejecutar operaciones con efectos secundarios.

Limitaciones:

  1. Complejidad: No es adecuado para lógica condicional compleja con múltiples operaciones.

  2. Legibilidad en anidación: Los operadores ternarios anidados pueden reducir significativamente la legibilidad del código.

  3. Depuración: El código más compacto puede ser más difícil de depurar.

// Difícil de leer y depurar
const resultado = a > b ? x > y ? "A" : "B" : z > y ? "C" : "D";

// Mejor alternativa con if/else
let resultado;
if (a > b) {
    if (x > y) {
        resultado = "A";
    } else {
        resultado = "B";
    }
} else {
    if (z > y) {
        resultado = "C";
    } else {
        resultado = "D";
    }
}

Ejemplos prácticos

Ejemplo 1: Determinar si un número es par o impar

function determinarParidad(numero) {
    return numero % 2 === 0 ? "Par" : "Impar";
}

console.log(determinarParidad(4)); // Muestra: "Par"
console.log(determinarParidad(7)); // Muestra: "Impar"

Ejemplo 2: Pluralizar palabras

function pluralizar(cantidad, singular, plural) {
    return cantidad === 1 ? singular : plural;
}

const manzanas = 5;
console.log(`Tengo ${manzanas} ${pluralizar(manzanas, "manzana", "manzanas")}`);
// Muestra: "Tengo 5 manzanas"

const libro = 1;
console.log(`Tengo ${libro} ${pluralizar(libro, "libro", "libros")}`);
// Muestra: "Tengo 1 libro"

Ejemplo 3: Mostrar mensajes según el estado de un usuario

const usuario = {
    nombre: "Laura",
    activo: true,
    admin: false
};

const mensajeEstado = usuario.activo 
    ? usuario.admin 
        ? `${usuario.nombre} es administrador activo` 
        : `${usuario.nombre} es usuario activo`
    : `${usuario.nombre} no está activo`;

console.log(mensajeEstado); // Muestra: "Laura es usuario activo"

Resumen

El operador ternario es una herramienta poderosa en JavaScript que nos permite escribir expresiones condicionales de forma concisa. Su sintaxis condicion ? valor_si_verdadero : valor_si_falso nos permite evaluar una condición y devolver diferentes valores en una sola línea de código. Es ideal para asignaciones condicionales simples y retornos de funciones.

Aunque puede hacer nuestro código más compacto, debemos utilizarlo con prudencia, evitando anidaciones excesivas y priorizando siempre la legibilidad. En situaciones donde la lógica condicional es compleja, una estructura if/else tradicional suele ser más apropiada y mantenible.

Dominar el operador ternario es un paso importante en tu camino para escribir código JavaScript más elegante y eficiente, siempre que lo utilices en los contextos adecuados.

Volver arriba