Short-Circuit Evaluations y Logical Assigning Operators: ¿Cómo se usan?

Todavía al comienzo del viaje de aprendizaje de JavaScript, aprendimos cómo usar estructuras de control usando bloques if/else. Sin embargo, a lo largo de nuestra carrera, nos encontramos con estructuras que no son tan intuitivas, pero que proporcionan un código más limpio y elegante, como short-circuit evaluations y logical assigning operators. Este texto pretende ayudar a los nuevos desarrolladores que quieran entender cómo funcionan estas estructuras.

Truthy and Falsy values

Antes de hablar de las estructuras en sí, es fundamental aclarar qué son truthy and falsy values. Si ya dominaste este contenido, puedes omitir este bloque.

En JavaScript, cualquier tipo de datos se puede convertir en un valor booleano. Esta conversión ocurre, por ejemplo, cuando usamos estructuras de control. Cero (0 o -0), cadena vacía (""), NaN (Not a Number), null e undefined se convierten en falsos, por lo que se denominan falsy values. Todos los demás valores se convierten en verdaderos y, por lo tanto, se denominan truthy values.

En ej. 1, la cadena "Condición no cumplida" se imprimirá en la consola, ya que la cadena vacía se convertirá en el valor booleano false, lo que hará que se ejecute el bloque else. Por otro lado, en el ej. 2, la cadena “false” (que no debe confundirse con el valor booleano false), es un valor distinto de 0, -0, “”, NaN, null e undefined, por lo que es un valor truthy. Como tal, se convertirá en true, por lo que la cadena "Condición cumplida" se imprimirá en la consola.

Operadores Lógicos OR y AND

Los operadores lógicos OR (||) y AND (&&) se utilizan para realizar cálculos de álgebra booleana. Este tipo de cálculo consiste en encadenar valores booleanos entre sí y, al final, comprobar si el resultado de este encadenamiento será verdadero o falso. Cuando usamos el operador “o”, el resultado del encadenamiento será falso solo si todos los operandos son falsos y, en el caso del operador “y”, el resultado será verdadero solo si todos los operandos son verdaderos.

Imagine, por ejemplo, que necesitamos elegir un estado brasileño cuyo nombre comience con la letra P o que esté ubicado en la región noreste del país. Para esto, tenemos la matriz noreste:

Podemos verificar el resultado de las declaraciones por separado de la siguiente manera:

Comprobamos que la primera hipótesis es verdadera y la segunda falsa. Para verificar que “Paraná” cumpla con las especificaciones, haremos lo siguiente:

Conforme esperado, o resultado é verdadeiro, pois uma das afirmações é verdadeira. Note que nem é necessário verificar se “Paraná” está contido no array nordeste, pois, independentemente da resposta, o resultado final da expressão será verdadeiro. Considere que agora que as especificações são que o estado escolhido precisa ter um nome iniciado com a letra P e estar situado na região nordeste. Esta verificação poderia ser realizada da seguinte forma:

La respuesta de expresión es falsa porque hay al menos una afirmación falsa en el hilo. A diferencia de la expresión anterior, aunque la primera afirmación sea verdadera, es necesario comprobar si la segunda también lo es para saber si el resultado de la expresión lógica es verdadero o falso.

El comportamiento de detener las evaluaciones de los operandos de una expresión lógica cuando ya es posible determinar el resultado de la expresión antes de evaluar todos los operandos se puede usar para ejecutar código condicionalmente. Esta técnica se conoce como evaluaciones de cortocircuito y se puede resumir en la siguiente tabla:

En ambos casos, si el valor buscado no se encuentra en la cadena, se devuelve el último valor de la cadena.

OR Short-Circuit ||

Para ayudar a explicar cómo funciona el cortocircuito "o", imagina el siguiente escenario:

1) Con una variedad de héroes y heroínas, su tarea es crear una nueva matriz compuesta por la propiedad de avatar de cada héroe;

2) La propiedad de avatar tiene una cadena que se puede usar en una solicitud HTTP para mostrar fotos únicas de estos héroes y heroínas. Sin embargo, debido a alguna falla, la propiedad de avatar de algunos de los objetos tiene valores nulos o "";

3) En estos casos, su guía es incluir la cadena “/fotoPadrão.png” en la nueva matriz.

El problema podría resolverse de esta manera:

La arrow function pasada como parámetro al método map del arreglo "herois" (héroes) devolverá el valor de heroi.avatar, si es truthy, si es falsy, la arrow function devolverá la cadena "/fotoPadrão.png". Sin embargo, el mismo problema podría resolverse así:

En esta segunda alternativa, si la propiedad del objeto hero.avatar es truthy, el valor de hero.avatar será devuelto por la arrow function y el contenido después del operador ||. será ignorado. Si el valor de heroi.avatar es falsy, se devolverá la cadena “fotoPadrao.png”.

OR Assigning Operator ||=

Asigna un valor a cualquier variable si el valor contenido en esta variable es falsy. Si nuestro objetivo fuera asignar el valor “/defaultphoto.png” a la propiedad hero.avatar en objetos donde esta propiedad no está bien definida, podríamos hacerlo de la siguiente manera:

Usando un cortocircuito OR, podríamos resolver el problema de la siguiente manera:

Al iterar a través de la matriz de héroes, si se encuentra que el valor de hero.avatar es truthy, el código escrito después del operador lógico || será ignorado. De lo contrario, se le asignará el valor “/fotoPadrao.png” a la propiedad heroi.avatar. Este comando se puede escribir de forma simplificada, haciendo uso del OR Assignment Operator, utilizando la siguiente sintaxis:

Como se ha señalado, el operador de asignación OR sirve para asignar condicionalmente valores a variables o propiedades que tienen valores falsy.

Nullish Short Circuiting ??

Ahora imagina el siguiente escenario:

1) Tienes un array con las estadísticas de los partidos de un campeonato de fútbol y necesitas crear un nuevo array con la cantidad de tarjetas recibidas en cada partido;

2) Para algunos elementos de la matriz, la información sobre el número de tarjetas no está disponible;

3) En estos casos, la pauta es incluir la cadena "no informado" en lugar de la cantidad de tarjetas recibidas en ese juego.

Aplicando la evaluación de cortocircuito OR, obtenemos la siguiente solución:

Tenga en cuenta que aunque ningún jugador recibió tarjetas en el partido entre Alemania y Holanda, la cadena 'No informado' se incluyó en la matriz en el índice correspondiente. Esto sucede porque el número cero es un valor falso. Podríamos resolver este bug de la siguiente manera:

Sin embargo, se puede obtener el mismo resultado aplicando el Nullish Short Circuiting Operator, representado por ??. Este operador funciona de manera similar al Short Circuiting operator "or", con la diferencia de que devuelve el primer valor que no sea null o "undefined".

Nullish Assigning operator ??=

Para asignar el valor predeterminado "No informado" solo a objetos cuyo valor de propiedad es null o undefined, podemos usar el Nullish Assignment Operator.

Esta sintaxis equivale a

AND Short-Circuit &&

Imagina que por cada tarjeta sufrida, la selección tendrá que pagar una multa de R$ 100,00. El monto total adeudado por los equipos como multa debe estar impreso en la consola. Para solucionar este problema, es necesario multiplicar el número de cartas por 100 solo en aquellos juegos donde el número de cartas está definido. Sin tener en cuenta los cambios realizados en el objeto de juegos en los ejemplos 11 y 12, podríamos resolver el problema de la siguiente manera:

El mismo problema podría resolverse usando la siguiente sintaxis:

AND assignment operator &&=

A diferencia del operador de asignación OR que asigna un valor a una variable que contiene valores falsy, el operador de asignación AND asigna un valor a las variables que contienen valores truthy. Podemos aprovechar esta herramienta y refactorizar la constante fina para convertirla en una función que devuelva una string formateada.

En este ejemplo, la función calcular multa recibe la matriz de juegos y calcula el monto total de la multa. Si este resultado es truthy, el valor de la variable fine se sobrescribe con la cadena formateada y, finalmente, se devolverá el nuevo valor de la variable fine. De lo contrario, se devolverá la cadena "Verificar los datos". Finalmente, enfatizamos que las líneas de código a continuación son equivalentes:

Vale la pena mencionar que los operadores de asignación lógica se introdujeron recientemente en JavaScript, por lo que es importante consultar la documentación para verificar si esta sintaxis es compatible con la versión de Nodo o Navegador en uso.

En resumen

En este artículo hablamos de valores truthy y valores falsy y su importancia a la hora de escribir estructuras de control. También hablamos sobre las short-circuit evaluations y los logical assignment operators y cómo se pueden usar para reemplazar las estructuras de control compuestas por bloques if/else tradicionales.

Para profundizar en el contenido, vale la pena consultar el libro JavaScript: The Definitive Guide, de David Flanagan, y los web docs de MDN, que sirvieron de referencia para este texto. Muchas gracias por tu atención y, si tienes alguna pregunta o sugerencia, no dudes en contactarme en las redes sociales.