Operador ternario en JavaScript

El operador ternario en JavaScript es una herramienta que sirve para simplificar estructuras condicionales. Esta diseñado para hacer el código más conciso y legible, este operador permite decidir entre dos valores o ejecutar acciones según una condición, todo en una sola línea.

En situaciones donde una declaración if...else resulta funcional pero demasiado extensa, el operador ternario ofrece una alternativa más compacta, manteniendo la lógica clara y eficiente.

Cuando se desea ejecutar un bloque si una condición es evaluada como verdadera (true), a menudo se usa una declaración if…else. Por ejemplo:

const age = 18;

if (age >= 18) {
  console.log('Puedes registrarte.');
} else {
  console.log('Acceso restringido.');
}

En el anterior ejemplo mostramos un mensaje que indica que una persona puede registrase si la edad es mayor o igual a 18 años. Aunque utilizar la estructura if...else no esta mal, hay ocasiones en la que podemos hacer uso de su alternativa corta, es decir, utilizar el operador ternario.

Uso del Operador Ternario

El operador ternario a menudo se utiliza como un atajo para las declaraciones if...else ya que ayuda a condensar el código y permite tomar decisiones rápidas en una misma línea.

Este operador el único operador en JavaScript que tiene tres operandos. Su sintaxis es la siguiente:

condición ? expresion1 : expresion2

• condición es una expresión que se evalúa como verdadera o falsa.
• expresion1 y expresion2 son expresiones con valores de algún tipo.

Si la condición es verdadera, el operador retorna el valor de expresion1, de lo contrario, devuelve el valor almacenado en expresion2.

Veamos el siguiente ejemplo:

const age = 18;
age >= 18 ? console.log('Puedes registrarte.') : console.log('Acceso restringido.');

En el ejemplo anterior se evalúa si la constante age es mayor o igual a 18, de ser así se imprime en consola: 'Puedes registrarte.' de lo contrario se imprimiría: 'Acceso restringido.'

Ejemplos de operadores ternarios de JavaScript

1) Para realizar múltiples declaraciones: El siguiente ejemplo utiliza el operador ternario para realizar múltiples operaciones, donde cada operación está separada por una coma:

const authenticated = true;

const nextURL = authenticated
  ? (console.log('Serás redirigido al área de administración.'), '/admin')
  : (console.log('Acceso denegado'), '/403');

console.log(nextURL);

En el ejemplo anterior el valor devuelto del operador ternario es el último valor de la lista separada por comas.

2) Ejemplo de simplificación del operador ternario:

const locked = 1;
const canChange = locked != 1 ? true : false;

Si locked es 1, entonces la variable canChange se establece en false, de lo contrario se establece en true. En este caso, puedes simplificarlo usando una expresión booleana de la siguiente manera:

const locked = 1;
const canChange = locked != 1;

3) Múltiples operadores ternarios de JavaScript: El siguiente ejemplo muestra cómo utilizar dos operadores ternarios en la misma expresión:

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’.

Este enfoque permite evaluar múltiples condiciones de manera concisa y efectiva, asignando el mensaje apropiado de forma rápida y eficiente.

4) Operador ternario en funciones: El operador ternario también se puede utilizar dentro de funciones para decidir qué valor devolver. Por ejemplo:

function getFee(isMember) {
  return isMember ? '$2.00' : '$10.00';
}

console.log(getFee(true));
console.log(getFee(false));

5) Uso del operador ternario para asignaciones múltiples: El operador ternario se puede utilizar para asignar múltiples variables en una sola línea, lo que puede ser útil para inicializaciones basadas en condiciones:

const age = 20;
let type, discount;

type = age >= 18 ? 'adult' : 'minor';
discount = age >= 18 ? 0.1 : 0.5;

console.log(type);
console.log(discount);

Al asignar un valor de 20 a la variable age, se utiliza el operador ternario para establecer type como ‘adult’ y discount como 0.1, indicando que una persona de 20 años es un adulto y recibe un descuento del 10%. Si age fuera menor de 18, type sería ‘minor’ y discount sería 0.5, reflejando un descuento mayor del 50% para menores de edad.

Conclusión

El operador ternario de JavaScript (? :) permite hacer el código más conciso y legible cuando se usa adecuadamente. Sin embargo debe ser usado con moderación y en casos donde su uso mejora la claridad del código.

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.