Los operadores lógicos - Curso de JavaScript de cero a máster - Capítulo 19


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.

Operador lógico AND

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

Código JavaScript

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

if (color == "rojo" && objeto == "mesa") {
    alert("Se cumplen las dos condiciones.");
}
El operador logico and de JavaScript

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.

Código JavaScript

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:

Código JavaScript

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

if (color == "rojo" || objeto == "mesa") {
    alert("Se cumple la condición.");
}
El operador logico or de JavaScript
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 este operador para crear condiciones que sean todo lo contrario a lo especificado. Veamos un ejemplo que te va a quedar más claro.

Código JavaScript

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

if (!(color == "rojo" && objeto == "mesa")) {
    alert("Se cumple la condición.");
}
El operador logico not de JavaScript

En este caso, la condición debería dar false, puesto que color se cumple pero 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 expresiones (condiciones) en variable y utilizarlas cuando quieras, aquí tienes un ejemplo:

Código JavaScript

let numero1 = 18;
let numero2 = 15;
let expresion = numero1 == 18 || numero2 == 20;

console.log(expresion);

Resultado en la consola

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

Ejercicios de JavaScript

  1. ¿Qué devuelve la siguiente expresion en el alert()?

  2. La idea es que lo aciertes sin cargarlo en el navegador. 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.

    Código JavaScript

    let numero1 = 10;
    let numero2 = 25;
    let numero3 = 10;
    
    alert(numero1 == 10 && numero2 == numero1);

  3. ¿Qué devuelve la siguiente expresion en el alert()?

  4. La idea es que lo aciertes sin cargarlo en el navegador.

    Código JavaScript

    let numero1 = 10;
    let numero2 = 25;
    let numero3 = 10;
    
    alert(numero1 == 10 || numero2 == numero1);
  5. ¿Qué devuelve la siguiente expresion en el alert()?

  6. La idea es que lo aciertes sin cargarlo en el navegador.

    Código JavaScript

    let numero1 = 10;
    let numero2 = 25;
    let numero3 = 10;
    
    alert(numero1 == 10 || numero2 == numero1 && numero1 == numero3);
  7. ¿Qué devuelve la siguiente expresion en el alert()?

  8. La idea es que lo aciertes sin cargarlo en el navegador.

    Código JavaScript

    let numero1 = 10;
    let numero2 = 25;
    let numero3 = 10;
    
    alert(numero1 == 10 && numero2 == 5*2);
  9. ¿Qué devuelve la siguiente expresion en el alert()?

  10. La idea es que lo aciertes sin cargarlo en el navegador.

    Código JavaScript

    let numero1 = 10;
    let numero2 = 25;
    let numero3 = 10;
    
    alert(!(numero1 != 10) && numero3 == 5*2);
  11. ¿Qué devuelve la siguiente expresion en el alert()?

  12. La idea es que lo aciertes sin cargarlo en el navegador.

    Código JavaScript

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

La solución la encontrarás aquí: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.