Cómo funciona el operador de signo de interrogación (?) en JavaScript

Artículo original escrito por: Nishant Kumar
Artículo original: How the Question Mark (?) Operator Works in JavaScript
Traducido y adaptado por: Rafael D. Hernandez

El operador de signo de interrogación o condicional, representado por a ?, es una de las características más potentes de JavaScript. El operador ? se usa en sentencias condicionales, y cuando se combina con a :, puede funcionar como una alternativa compacta a sentencias if...else.

Pero hay más de lo que parece. Hay tres usos principales para el operador ?, dos de las cuales puede que no uses o que ni siquiera conozcas. Vamos a aprender sobre todos ellos en detalle.

Tres usos principales para el signo de interrogación (?) en JavaScript:

1. Operador ternario
2. Encadenamiento opcional
3. Fusión alcista

Veremos cada uno de estos en detalle, comenzando con la forma más común en que verás el uso del operador ? – como operador ternario.

1. Operador ternario

El término ternario significa compuesto de tres elementos o partes. El operador ? también se llama operador ternario porque, a diferencia de otros operadores como igualdad estricta (===) o resto (%), es el único que toma tres operandos.

¿Empezando por ?, agregamos una condición en el lado izquierdo y un valor en el lado derecho para devolver cuando la condición es verdadera. Luego agregamos dos puntos (:) seguidos de un valor para devolver si la condición es falsa.

El operador ternario es básicamente un atajo para una sentencia tradicional if...else.

Comparemos un operador ternario con una larga sentencia if ...else:

Aquí, el operador ternario ocupa solo una línea de código, mientras que if...else toma siete líneas.

Usar un operador ternario es mucho más efectivo, ¿verdad?

2. Encadenamiento opcional

En 2020, se introdujo una nueva característica impresionante conocida como encadenamiento opcional.

Para entender cómo funciona, imagina este escenario.

Supongamos que tienes código que llama a una propiedad de objeto que no existe, lo que desencadena un error en tiempo de ejecución. Esto puede deberse a un valor que falta o no está definido en tu base de datos o en una API:

Gracias al encadenamiento opcional, puede insertar una ? entre el nombre de la propiedad y el período entre la siguiente propiedad.

Con eso, volverá undefined en lugar de lanzar un error feo.

El encadenamiento opcional es realmente una característica que cambia la vida de los desarrolladores de JavaScript.

3. Fusión alcista

En algunos casos, debe establecer un valor predeterminado para un nombre o valor de propiedad faltante.

Por ejemplo, digamos que estamos creando una aplicación Meteorológica en la que estamos obteniendo la temperatura, la humedad, la velocidad del viento, la presión, la hora del amanecer y el atardecer y la imagen de la ciudad. Hemos introducido un lugar, digamos Bangalore, pero por alguna razón, su imagen no está en la base de datos.

Cuando la aplicación obtenga y muestre los datos, la imagen estará en blanco, lo que puede parecer feo. Lo que podemos hacer, en ese caso, es establecer una imagen predeterminada para aquellas ciudades que no tienen una imagen, Bangalore en nuestro caso.

De esta manera, cuando la aplicación muestre los datos, la imagen predeterminada estará allí para las ciudades sin imágenes.

Puede hacer esto usando el operador ||, conocido como el operador lógico OR:

Pero si usas || para proporcionar un valor predeterminado, puedes encontrar comportamientos inesperados si consideras que algunos valores se pueden usar (por ejemplo,  ' '  o o).

Considera un escenario donde una variable tiene el valor de 0 o una cadena vacía. Si usamos (||), se considerará indefinido o NULL y devolverá algún valor predeterminado que hayamos corregido.

En lugar del operador lógico OR ( || ), puedes usar signos de interrogación dobles (??), o coalescencia alcista.

Aprendamos con un ejemplo.

const valor1 = 0 || 'cadena predeterminada';
console.log(valor1);


const valor2 = '' || 1000;
console.log(valor2);

Aquí, tenemos '0' y  'cadena predeterminada' en la variable  valor1. Si registramos su valor en la consola, obtendremos 'cadena predeterminada', lo cual es raro. En lugar de la cadena predeterminada, deberíamos obtener 0, ya que cero no es indefinido o nulo. Entonces, '||' no hace el trabajo aquí.

Del mismo modo, es lo mismo con el valor2.

const valor1 = 0 ?? 'cadena predeterminada';
console.log(valor1);


const valor2 = '' ?? 1000;
console.log(valor2);

Pero si reemplazamos '||' por '??', obtendremos 0 y una cadena vacía, lo que lo hace tan genial.

La coalescencia alcista funciona exactamente igual que el operador lógico OR, excepto que obtendrá el valor del lado derecho cuando el valor del lado izquierdo sea undefined o null.

En otras palabras, ?? solo permite valores undefined y null, no cadenas vacías ( '' ) o 0s.

Conclusión

Ahora espero que entiendas cómo el operador funciona en JavaScript. Parece simple, pero es uno de los personajes más poderosos del idioma. Proporciona azúcar sintáctica de tres maneras increíbles, pero diferentes.

Pruébalos y hazme saber cómo va.

¡Feliz aprendizaje!