Operadores lógicos

Aprende a simplificar con AND, OR y NOT


Existen algunos operadores menos conocidos a nivel general, pero que son muy útiles para ciertas tareas. Se denominan operadores lógicos y se suelen utilizar para realizar comprobaciones rápidas:

Operador Descripción
&& Operador lógico AND Devuelve true si ambos valores son verdaderos. Sino, false.
|| Operador lógico OR Devuelve true si alguno de los dos valores es verdadero. Sino, devuelve false.
! Operador lógico NOT Devuelve el valor opuesto (se dice que niega el valor).

Analicemos uno por uno para entender como funcionan.

Operador AND lógico

El operador lógico AND funciona de una forma que se llama cortocircuito lógico, donde:

  • 1️⃣ Si el primer valor se evalua como verdadero, devuelve el segundo valor.
  • 2️⃣ Si el primer valor se evalua como falso, devuelve ese primer valor.
  • ✅ O lo que es lo mismo: Si A es verdadero, entonces B.

Si trabajamos con podemos simplificarlo mucho: Sólo devuelve true si ambos valores comparados son true. Si uno de ellos es false, entonces devuelve false. Esto se entiende muy fácilmente con los siguientes ejemplos:

false && false      // false (si ninguno de los dos es true, false)
true && false       // false (idem)
false && true       // false (idem)
true && true        // true (si ambos son true, true)

Pero también podemos utilizar el operador && con tipos de datos que no sean . En este caso, recordemos que si el primer operando es false devuelve el primero, si el segundo operando es true, devuelve el segundo.

0 && undefined      // 0         (-> false && false, devuelve el primero)
undefined && 0      // undefined (-> false && false, devuelve el primero)
55 && null          // null      (-> true && false,  devuelve el segundo)
null && 55          // null      (-> false && true,  devuelve el primero)
44 && 20            // 20        (-> true && true,   devuelve el segundo)

Teniendo todo esto en cuenta, este operador es una oportunidad fantástica para utilizarlo a modo de if compactos y muy legibles. No obstante, ten en cuenta que este patrón puede ser interesante en algunos casos simples, pero en otros puede complicar la legibilidad de código.

Veamos algunos ejemplos de como utilizarlo:

45 && "OK"            // "OK"
false && "OK"         // false

const doTask = () => "OK!";   // Creamos función que devuelve "OK!"
isCorrect && doTask()         // Si isCorrect es true, ejecuta doTask()
isCorrect && (a = 55);        // Si isCorrect es true, asigna a la variable "a" el 55

También ten en cuenta que en el caso de necesitar un caso else para el fin, este patrón no sería ideal. Para ese caso, echa un vistazo al siguiente, el operador ternario.

Operador ternario

El operador ternario es una especie de if compacto que tienen la mayoría de los lenguajes de programación, donde en lugar de utilizar un if / else tradicional, para escribir en varias líneas, podemos hacerlo mediante el operador ternario. Su estructura es la siguiente: (condición) ? valor verdadero : valor falso.

Veamos como la utilizaríamos, comparándolo con un if:

// Condicional if (sin operador ternario)
let role;
if (name === "Manz") {
  role = "streamer";
} else {
  role = "user";
}

// Con operador ternario
const role = name === "Manz" ? "streamer" : "user";

En este caso, name === "Manz" sería la condición, "streamer" el valor si la condición es verdadera, y "user" el valor si la condición es falsa. Como puedes ver, el operador ternario permite escribir código mucho más compacto en muchas situaciones.

Condicionales y operador ternario

Operador lógico OR

Por otro lado, el operador lógico OR funciona de la siguiente manera:

  • 1️⃣ Si el primer valor se evalua como verdadero, devuelve el primer valor.
  • 2️⃣ Si el primer valor se evalua como falso, devuelve el segundo valor.
  • ✅ O lo que es lo mismo: Si A es verdadero, A, sino B.
true || false;    // true
false || true;    // true
true || true;     // true
false || false;   // false

En el artículo de Nullish Coalescing puedes encontrar un poco más de contexto sobre el operador lógico OR y más ejemplos de uso.

Operador lógico NOT

Por último, el operador lógico NOT es un operador unario muy frecuente y útil, que se utiliza para negar un valor, es decir, para invertir su valor .

Si una variable es true, al negarla valdrá false y si una variable vale false se niega, valdrá false. Para negar una variable, se precede del símbolo !. Veamos algunos ejemplos:

!true        // false
!false       // true
!!true       // true
!!false      // false
!!!true      // false

También lo podemos hacer con variables con otros tipos de datos, y no sólo con , donde observa que cada valor se convierte a para que sea más sencillo evaluarlo:

!44          // false (se evalua como !true)
!0           // true (se evalua como !false)
!""          // true (es lo mismo que !0, que a su vez es !false)
!(10 || 23)  // false (se evalua como !10, que es !true)

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev