Guía del Operador Ternario en JavaScript

En esta guía, aprenderá todo lo que desee saber sobre los operadores ternarios en JavaScript: la sintaxis, los casos de uso y las mejores prácticas.

Introducción

Un operador ternario es un operador de tres operandos compatible con la mayoría de los lenguajes de programación, incluidos JavaScript, Java, C++, C# y muchos otros. También se le conoce como operador condicional porque se considera una alternativa más concisa a la declaración condicional (if-else).

En esta guía, aprenderemos qué es el operador ternario y cómo funciona en JavaScript. Además, haremos una breve comparación con la declaración if-else, para que sepamos cuándo usar cuál.

Operador ternario en JavaScript

Como en cualquier otro idioma, el operador ternario en JavaScript tiene tres operandos:

1
(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;

Podemos traducir esto fácilmente a la correspondiente sentencia if-else:

1
2
3
4
5
if (condition) {
    returnExpressionIfTrue;
} else {
    returnExpressionIfFalse;
}

Básicamente, esto significa que condición y returnExpressionIfTrue corresponden a la cláusula if de la declaración if-else correspondiente, y returnExpressionIfFalse corresponde a la sección else de la declaración mencionada.

Si la condición se evalúa como verdadera, se ejecuta la expresión returnExpressionIfTrue. Por otro lado, si la condición se evalúa como falsa, se ejecuta returnExpressionIfFalse.

{.icon aria-hidden=“true”}

Nota: Para ser más precisos, JavaScript comprueba si la condición se evalúa como valor verdadero o falso. Los valores falsos son todos los valores que JavaScript evalúa como falso en una expresión booleana: falso, ninguno, indefinido, NaN, 0, -0, 0n y "". Todos los demás valores se evalúan como “verdaderos” en una expresión booleana, por lo que se consideran verdaderos.

Cómo usar el operador ternario

Una manera perfecta de explicar el operador ternario sería compararlo con la sentencia if-else. Supongamos que tenemos una edad determinada y queremos comprobar si un usuario es más joven o no:

1
2
3
4
5
6
7
8
9
let age = 21;
let result;

if(age >= 20){
    result = "User can view content";
} else {
    result = "User cannot view content";
}
console.log(result);

Reescribamos este bloque if-else usando operador ternario:

1
2
3
4
let age = 21;
let result = age >= 20 ? "User can view content" : "User cannot view content";

console.log(result);

Básicamente, cualquier cosa antes del signo de interrogación (?) es la condición que estamos comprobando. Los otros dos operandos son expresiones, el primero antes del punto y coma (:) y el segundo después. Si la condición es verdadera, el valor del resultado será "El usuario puede ver el contenido". De lo contrario, el valor asignado al resultado será "El usuario no puede ver el contenido".

Veamos otro ejemplo interesante:

1
2
3
4
5
6
7
let name = "John Doe";

if (name) {
    console.log("Hello " + name);
} else {
    console.log("Hello " + "Guest");
}

Dado que name es una cadena no vacía, se considera que es un valor verdadero. Por lo tanto, este ejemplo resultará en el registro de "Hello John Doe" en la consola. Si el nombre fuera una cadena vacía, la salida sería "Hola invitado". Este escenario es fácilmente convertible al operador ternario:

1
2
3
let name = "John Doe";

name ? console.log("Hello " + name) : console.log("Hello " + "Guest");

Aunque tal vez esté fuera del alcance de esta guía, otra solución interesante es usar el operador lógico o en lugar del operador ternario. Esto nos dará absolutamente el mismo resultado que los otros dos enfoques:

1
console.log("Hello " + (name || "Guest"));

Manejo de expresiones de varias líneas con el operador ternario {#manejo de expresiones de varias líneas con el operador ternario}

Echando un vistazo a la primera expresión, notaremos que pudimos colapsar un bloque if-else de cinco líneas en una declaración ternaria de una sola línea. Supongamos que queremos manejar expresiones de varias líneas con el operador ternario:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const age = 22;
let youth;

if (age <= 30) {
    youth = true;
    console.log("I am a Youth!");
} else {
    youth = false;
    console.log("I am an Adult!");
}

console.log(youth);

Tendríamos que poner estas expresiones entre paréntesis y luego separar cada una por una coma:

1
2
3
age <= 30
    ? ((youth = true), console.log("I am a Youth!"))
    : ((youth = false), console.log("I am an Adult!"));

Aunque el código que usa operadores ternarios es más corto, incluso esta expresión de dos líneas hace que el operador ternario sea bastante difícil de leer y comprender. Esa es la razón por la que es mejor no usar el operador ternario para expresiones de varias líneas; una mejor alternativa es quedarse con el bloque if-else en situaciones como esta.

Operadores ternarios anidados

Un operador ternario anidado se refiere a la capacidad de colocar un operador ternario dentro de otro. Estas declaraciones se utilizan cuando queremos evaluar múltiples condiciones. Por ejemplo, con la declaración if-else podemos usar la declaración else if para anidar varias condiciones juntas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let studentScore = 65;
let studentGrade;

if (studentScore >= 70) {
    studentGrade = "A";
} else if (studentScore >= 60) {
    studentGrade = "B";
} else if (studentScore >= 50) {
    studentGrade = "C";
} else if (studentScore >= 45) {
    studentGrade = "D";
} else {
    studentGrade = "E";
}

console.log(`Your grade is ${studentGrade}`);

Cuando implementemos esto con el operador ternario, tendremos algo como esto:

1
2
3
4
5
6
7
8
9
let studentScore = 65;

let studentGrade = studentScore >= 70 ? "A" 
    : studentScore >= 60 ? "B" 
    : studentScore >= 50 ? "C" 
    : studentScore >= 45 ? "D" 
    : "E";

console.log(`Your grade is ${studentGrade}`);

Esto puede volverse difícil de leer rápidamente si no prestamos atención y entendemos correctamente cómo funciona el operador ternario. Más importante aún, incluso si puede leer esto, ¿qué pasa con sus colegas? En casos como este, se recomienda que usemos las sentencias if-else o switch en lugar de escribir código que pueda confundir a otros.

Conclusión

Como hemos visto en esta guía, el operador ternario y la declaración if-else se pueden usar de manera bastante intercambiable y depende de usted decidir cuándo elegir uno sobre el otro. En términos generales, el operador ternario no está diseñado para reemplazar en última instancia la declaración if-else. En su lugar, pretende ser una alternativa válida en escenarios donde if-else solo crea una sobrecarga innecesaria, cuando el resultado es tan simple que cualquier cosa, además de un simple operador ternario, ocupa demasiado espacio en el código.

En esta guía, analizamos qué es un operador ternario y cómo usarlo en JavaScript. Puede parecer un poco intimidante al principio, pero después de leer esta guía debería comprender cómo funciona y cuál es la diferencia entre un operador ternario y if-else, para que sepa cuándo elegir uno u otro.