Cómo usar los operadores ternarios de JavaScript

Resumen: en este tutorial, aprenderás a usar el operador ternario de JavaScript para que tu código sea más conciso.

Introducción al operador ternario de JavaScript

Cuando deseas ejecutar un bloque si una condición se evalúa como verdadera, a menudo se usa una declaración if...else. Por ejemplo:

let age = 18;
let message;

if (age >= 16) {
  message = 'You can drive.';
} else {
  message = 'You cannot drive.';
}

console.log(message);

En este ejemplo, mostramos un mensaje que indica que una persona puede conducir si la edad es mayor o igual a 16 años. Alternativamente, puedes usar un operador ternario en lugar de la declaración if-else como esta:

let age = 18;
let message;

age >= 16 ? (message = 'You can drive.') : (message = 'You cannot drive.');

console.log(message);

O puedes usar el operador ternario en una expresión de la siguiente manera:

let age = 18;
let message;

message = age >= 16 ? 'You can drive.' : 'You cannot drive.';

console.log(message);

Esta es la sintaxis del operador ternario:

condition ? expressionIfTrue : expressionIfFalse;

En esta sintaxis, condition es una expresión que se evalúa como un valor booleano, ya sea verdadero o falso.

Si condition es verdadera, se ejecuta la primera expresión (expresionIfTrue). Si es falso, se ejecuta la segunda expresión (expressionIfFalse).

A continuación, se muestra la sintaxis del operador ternario utilizado en una expresión:

let variableName = condition ? expressionIfTrue : expressionIfFalse;

En esta sintaxis, si condition es verdadera, variableName tomará el resultado de la primera expresión (expressionIfTrue) o expresiónIfFalse.

Ejemplos de operadores ternarios de JavaScript

Tomemos algunos ejemplos del uso del operador ternario.

1) Usar el operador ternario de JavaScript para realizar múltiples declaraciones

El siguiente ejemplo usa el operador ternario para realizar múltiples operaciones, donde cada operación está separada por una coma. Por ejemplo:

let authenticated = true;
let nextURL = authenticated
  ? (alert('You will redirect to admin area'), '/admin')
  : (alert('Access denied'), '/403');

// redirect to nextURL here
console.log(nextURL); // '/admin'

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

2) Ejemplo de operador ternario simplificado

Veamos el siguiente ejemplo:

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

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

let locked = 1;
let canChange = locked != 1;

3) Ejemplo de uso de múltiples operadores ternarios de JavaScript

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

let speed = 90;
let message = speed >= 120 ? 'Too Fast' : speed >= 80 ? 'Fast' : 'OK';

console.log(message);

Resultado:

'Fast'

Es una buena práctica usar el operador ternario cuando facilita la lectura del código. Si la lógica contiene muchas sentencias if...else, debes evitar el uso de operadores ternarios.

Resumen

Utiliza el operador ternario de JavaScript (?:) para que el código sea más conciso.