Los operadores lógicos de JavaScript con ejemplos

Seguimos con los condicionales, para ello, tenemos que ampliar los operadores vistos hasta ahora.

Gracias a los operadores lógicos puedes ir encadenando más de una condición en los condicionales. Creando así estructuras más complejas.

Operador lógico AND

El operador and nos permite comparar más de una cosa a la vez, por ejemplo:

let color = "rojo";
let objeto = "mesa";

if (color == "rojo" && objeto == "mesa") {
	alert("Se cumplen las dos condiciones.");
}

Esta condición quiere decir que si el color es rojo y el objeto es mesa exactamente, se cumple la condición. En cambio, si por ejemplo una de las dos cosas no se cumple, no se ejecutará el código del if, o lo que es lo mismo, dará false.

En el siguiente ejemplo, el color sigue siendo rojo, pero en objeto ya no se cumple la condición, de modo que no se ejecuta el código del if.

let color = "rojo";
let objeto = "silla";

if (color == "rojo" && objeto == "mesa") {
	alert("Se cumplen las dos condiciones.");
}

El operador lógico and (&&) devuelve true si las dos condiciones se cumplen. Si se cumple una o ninguna, devuelve false.

Operador lógico OR

El operador lógico OR nos permite hacer condiciones en las que solo se cumpla una de las dos comparaciones, independientemente de que se cumple una o las dos. por ejemplo:

let color = "rojo";
let objeto = "silla";

if (color == "rojo" || objeto == "mesa") {
	alert("Se cumple la condición.");
}

El operador lógico OR (||) devuelve true si una o las dos condiciones se cumplen. Si no se cumple ninguna, devuelve false.

Operador lógico NOT

Tenemos el operador lógico NOT para crear condiciones que sean todo lo contrario a lo especificado. Veamos un ejemplo que te va a quedar más claro.

let color = "azul";
let objeto = "silla";

if (!(color == "rojo" && objeto == "mesa")) {
	alert("Se cumple la condición.");
}

En este caso, la condición debería dar false, puesto que el valor de color se cumple pero de objeto no, y lleva un operador lógico AND, se tendrían que cumplir los dos valores para que diera un valor de true. En cambio, por el operador de negación not ! se consigue todo lo contrario, si no se cumple la condición o expresión de dentro de los paréntesis, devuelve true.

El operador lógico not (!) devuelve todo al revés. Da un valor de true si la condición no se cumple y un valor de false si se cumple.

También puedes almacenar expresiónes (condiciones) en variable y utilizarlas cuando quieras, aquí tienes un ejemplo:

let numero1 = 18;
let numero2 = 15;
let expresión = numero1 == 18 || numero2 == 20;

console.log(expresión);

true

Por último, que sepas que puedes encadenar tantos valores y operadores como quieras. Por ejemplo: numero1 == 10 || numero2 == numero1 && numero1 == numero3.

Ejercicios de JavaScript

La idea es que lo aciertes los siguientes ejercicios sin cargarlos en el navegador antes e tener una respuesta. No hagas trampas .
De todas formas, aunque sepas si devuelve true o false en el navegador, deberías saber porqué. Esa es la pregunta que te debes hacer.

48. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(numero1 == 10 && numero2 == numero1);

49. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(numero1 == 10 || numero2 == numero1);

50. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(numero1 == 10 || numero2 == numero1 && numero1 == numero3);

51. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(numero1 == 10 && numero2 == 5*2);

52. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(!(numero1 != 10) && numero3 == 5*2);

53. ¿Qué devuelve la siguiente expresión en el alert()?

let numero1 = 10;
let numero2 = 25;
let numero3 = 10;

alert(numero1 != 10 && numero3 == 5*2);

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.