El operador OR lógico de JavaScript: ¿cómo funciona?

El operador lógico OR (o || ) en JavaScript es un operador que devuelve el lado izquierdo si el lado izquierdo es verdadero , pero de lo contrario, el valor predeterminado y devuelve el lado derecho.

Esto significa que se puede usar para probar ambas declaraciones lógicas y también para devolver el operando del lado derecho en caso de que el izquierdo sea falsy .

Echemos un vistazo a cómo funciona.

¿Qué significan realmente Verdadero y Falso en JavaScript?

Antes de continuar, primero entendamos qué significa falsy . Puede parecer una declaración vaga, pero en realidad tiene una definición muy específica. Los siguientes valores son falsy en JavaScript:

• false
• 0 o -0 o 0n
• any cadena vacía, es decir, ""
• null
• undefined
• NaN

De manera similar, truthy simplemente significa cualquier cosa que no sea falsy .

Dado que falsy puede significar 0 y "" , a veces puede ser una mala elección para establecer valores predeterminados.

Por ejemplo, en algunos escenarios, si su valor realmente es 0 y quiere mostrarlo, no podrá con el || operador. Para estos casos, es mejor considerar el operador coalescente nulo.

¿Cómo funciona el operador lógico OR en JavaScript?

Como se mencionó, el || El operador tiene dos funciones principales en JavaScript. Más comúnmente, se encuentra en declaraciones lógicas if..else , donde devuelve verdadero si uno o más de sus operandos es truthy , pero también se usa para devolver el primer valor si es truthy , o de forma predeterminada en el lado derecho. operando si no.

el || funciona de ambas maneras porque en realidad devuelve un valor.

Uso de lógica OR con lógica

Probablemente habrás visto || más comúnmente utilizado en declaraciones lógicas como if y else . En estos casos, normalmente estamos probando una declaración lógica, por lo que || devolverá true si uno o más de sus operandos es truthy .

Lo que está sucediendo debajo es el || El operador devuelve un valor, que luego la declaración if convierte en true o false .

 let x = 100; // This returns true, since both of these statements are correct. if(x > 5 || x > 10) { // ... } // Since both "1" and "2" can be converted to true, this also returns true in this context. if("1" || "2") { // ... } // Since both "" and null are falsy, they are converted to false, and as such this returns false. if("" || null) { // ... }

Esta es una de las principales formas en que usará || en su código, pero también se usa con frecuencia para devolver valores en función de cuán truthy o falsy sean.

Valores devueltos

Veamos otro ejemplo ahora, fuera de las declaraciones lógicas. Como se mencionó, || devuelve su lado izquierdo si es truthy , pero de lo contrario devuelve su lado derecho.

Eso suena un poco confuso, así que veamos algunos ejemplos.

 // Is set to 1, since the first operand is falsy let x = false || 1; // Is set to hello, since "hello" is truthy let y = "hello" || true;

En el ejemplo anterior, dado que x tiene su lado izquierdo establecido en false , x se convierte en 1. De manera similar, en y , dado que "hello" no es falsy , el valor de y es "hello" . Esta funcionalidad es diferente de su aplicación en declaraciones lógicas y declaraciones if..else , pero puede ser útil en muchas situaciones.

Curiosamente, incluso si el último elemento proporcionado es falsy , JavaScript aún lo devolverá.

Por ejemplo:

 // Is set to null since false is falsy let x = false || null; // Is set to false since 0 is falsy let y = 0 || false;

Encadenamiento del operador OR

Es posible encadenar el || operador en JavaScript. Al encadenar declaraciones lógicas (en cláusulas if..else ...else), la declaración devolverá verdadero si algún elemento encadenado es truthy :

 // This works since both "1" and true are truthy if("1" || true || false) { // ... console.log('this works') } // This doesn't work since all values are falsy if(false || null || undefined) { console.log('this does not work'); }

Cuando usamos || encadenado fuera de declaraciones lógicas, utilizará el primer valor truthy encontrado, o por defecto al valor final. Por ejemplo, a continuación, x es igual a 3 , y es true y z es {} . Si te preguntas por qué z es {} , es porque todo lo que no es falsy es truthy , lo que significa que un objeto es truthy .

 // x is set to 3 let x = false || 0 || 3; // y is set to true let y = false || true || 3; // z is set to {} let z = {} || [] || x;

Conclusión

el || El operador se usa con frecuencia en declaraciones lógicas, así como valores falsy que no son falsos si se encuentra uno. Es un operador flexible que es fundamental para comprender JavaScript. Si está interesado en otro operador similar, también puede leer sobre el operador coalescente nulo .