Cómo usar los operadores ternarios de JavaScript

Estrada Web Group
Estrada Web Group
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.

Compartir artículo:

Más artículos geniales

Cómo agregar código JavaScript en una página HTML

Cómo agregar código JavaScript en una página HTML

Resumen: en este tutorial aprenderas cómo incrustar código JavaScript en una página HTML.

Ver artículo completo
¿Cómo validar un formulario con jQuery en solo dos minutos?

¿Cómo validar un formulario con jQuery en solo dos minutos?

Este tutorial te muestro cómo validar un formulario con jQuery de forma muy rápida y sencilla, para la demostración utilizaré un formulario de registro.

Ver artículo completo
Cómo usar los operadores ternarios de JavaScript

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.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla