Introducción a los operadores lógicos de JavaScript

Resumen: en este tutorial, aprenderás a utilizar los operadores lógicos de JavaScript, incluido el operador lógico NOT (!), el operador lógico AND (&&) y el operador lógico OR (||).

Introducción a los operadores lógicos en JavaScript

Los operadores lógicos son importantes en JavaScript porque te permiten comparar variables y hacer algo basado en el resultado de esa comparación.

Por ejemplo, si el resultado de la comparación es verdadero (true), puede ejecutar un bloque de código; si es falso (false), puede ejecutar otro bloque de código.

JavaScript proporciona tres operadores lógicos:

• ! (NOT lógico)
• || (OR lógico)
• && (AND lógico)

1) El operador lógico NOT (!) en JavaScript

¡JavaScript usa un signo de exclamación ! para representar el operador lógico NOT. El operador ! se puede aplicar a un solo valor de cualquier tipo, no solo a un valor booleano.

Cuando aplicas el operador ! a un valor booleano, el operador ! devuelve true si el valor es false y viceversa. Por ejemplo:

let elegible = false,
    requerido = true;

console.log(!elegible);
console.log(!requerido);

Resultado:

true
false

En este ejemplo, elegible es igual false, por lo que ! elegible devuelve true. Y dado que el requerido es true, el ! requerido devuelve false.

Cuando aplicas el operador ! a un valor no booleano. El operador ! primero convierte el valor a un valor booleano y luego lo niega.

El siguiente ejemplo muestra cómo usar el operador !:

!a

El operador lógico ! trabaja con base en las siguientes reglas:

• Si a no está definido (undefined), el resultado es true.
• Si a es null, el resultado es true.
• Si a es un número distinto de 0, el resultado es false.
• Si a es NaN, el resultado es true.
• Si a es un objeto, el resultado es false.
• Si a es una cadena vacía, el resultado es true. En el caso de que a sea una cadena no vacía, el resultado es false

Lo siguiente demuestra los resultados de la lógica del operador ! cuando se aplica a un valor no booleano:

console.log(!undefined); // true
console.log(!null); // true
console.log(!20); //false
console.log(!0); //true
console.log(!NaN); //true
console.log(!{}); // false
console.log(!''); //true
console.log(!'OK'); //false
console.log(!false); //true
console.log(!true); //false

Doble negación (!!)

A veces, puedes ver la doble negación (!!) en el código. La doble negación !! utiliza el operador lógico NOT (!) dos veces para convertir un valor a su valor booleano real.

El resultado es el mismo que usa la función Boolean(). Por ejemplo:

let contador = 10;
console.log(!!contador); // true

El primer operador ! niega el valor booleano de la variable contador. Si el contador es true, entonces el operador ! lo convierte a false y viceversa.

El segundo operador ! niega ese resultado del primer operador ! y devuelve el valor booleano real de la variable contador.

2) El operador lógico AND (&&)

JavaScript usa el doble ampersand (&&) para representar el operador lógico AND. La siguiente expresión utiliza el operador &&:

let result = a && b;

Si a se puede convertir en true, el operador && devuelve la b; de lo contrario, devuelve la a. De hecho, esta regla se aplica a todos los valores booleanos.

La siguiente tabla de verdad ilustra el resultado del operador && cuando se aplica a dos valores booleanos:

El resultado del operador && es true solo si ambos valores son verdaderos, de lo contrario, es false. Por ejemplo:

let elegible = false,
    requerido = true;

console.log(elegible && requerido); // false

En este ejemplo, el elegible es false, por lo tanto, el valor de la expresión elegible && requerido es false.

Veamos el siguiente ejemplo:

let eligible = true,
    required = true;

console.log(eligible && required); // true

En este ejemplo, tanto elegible como requerido son true, por lo tanto, el valor de la expresión elegible y requerido es true.

Evaluación de cortocircuito

Significa que el operador && evalúa el segundo valor solo si el primero no es suficiente para determinar el valor de una expresión. Por ejemplo:

let b = true;
let resultado = b && (1 / 0);
console.log(resultado);

Resultado:

Infinity

En este ejemplo, b es true, por lo tanto, el operador && no podría determinar el resultado sin evaluar la segunda expresión (1/0).

El resultado es Infinity, que es el resultado de la expresión (1/0). Sin embargo:

let b = false;
let resultado = b && (1 / 0);
console.log(resultado);

Resultado:

false

En este caso, b es false, el operador && no necesita evaluar la segunda expresión porque puede determinar el resultado final como un valor basado en false del primer valor.

La cadena de operadores &&

La siguiente expresión utiliza varios operadores &&:

let resultado = valor1 && valor2 && valor3;

El operador && hace lo siguiente:

• Evalúa los valores de izquierda a derecha.
• Para cada valor, lo convierte en un valor booleano. Si el resultado es false, se detiene y devuelve el valor original.
• Si todos los valores son valores reales, devuelve el último valor.

En otras palabras, el operador && devuelve el primer valor false o el último valor si no se encuentra ninguno.

Si un valor se puede convertir en true, se denomina valor verdadero. Si un valor se puede convertir a false, se denomina valor falso.

3) El operador lógico OR (||)

JavaScript usa la tubería doble || para representar el operador lógico OR. Puedes aplicar el || operador a dos valores de cualquier tipo:

let resultado = a || b;

Si a se puede convertir en true, devuelve a; si no, devuelve b. Esta regla también se aplica a los valores booleanos.

La siguiente tabla ilustra el resultado del operado || basado en el valor de los operandos:

El operador || devuelve false si ambos valores se evalúan como falso. En caso de que cualquiera de los valores sea true, || operador devuelve verdadero. Por ejemplo:

let eligible = true,
    required = false;

console.log(eligible || required); // true

Ver otro ejemplo:

let elegible = false,
    requerido = false;
console.log(elegible || requerido); // false

En este ejemplo, la expresión elegible || requerido devuelve false porque ambos valores son falsos.

El operador || también usa la evaluación de cortocircuito

Similar al operador &&, el operador || usa cortocircuito. Significa que, si el primer valor se evalúa como true, el operador && no evalúa el segundo.

La cadena de operadores ||

El siguiente ejemplo muestra cómo usar múltiples operadores || en una expresión:

let resultado = valor1 || valor2 || valor3;

El operador || hace lo siguiente:

• Evalúa los valores de izquierda a derecha.
• Para cada valor, lo convierte en un valor booleano. Si el resultado de la conversión es verdadero, se detiene y devuelve el valor.
• Si todos los valores se evaluaron como falsos, devuelve el último valor.

En otras palabras, la cadena de operadores || devuelve el primer valor verdadero o el último si no se encontró ningún valor verdadero.

Precedencia de operadores lógicos

Cuando mezclas operadores lógicos en una expresión, el motor de JavaScript evalúa los operadores según un orden específico. Y este orden se llama precedencia de operadores.

En otras palabras, la precedencia de operadores es el orden de evaluación de los operadores lógicos en una expresión.

La precedencia del operador lógico es en el siguiente orden de mayor a menor:

• NOT lógico (!)
• AND lógico (&&)
• OR lógico (||)

Resumen

• El operador NOT (!) niega un valor booleano. El (!!) convierte un valor en su valor booleano real.
• El operador AND (&&) se aplica a dos valores booleanos y devuelve verdadero si ambos valores son verdaderos.
• El operador OR (||) se aplica a dos valores booleanos y devuelve verdadero si uno de los operandos es verdadero.
• Tanto && como || operador usan cortocircuito. También se pueden aplicar a valores no booleanos.
• La precedencia de operadores lógicos de mayor a menor es !, && y ||.