Cargando...

Operadores lógicos

La comparación te dio una sola respuesta sí/no. En la práctica a menudo necesitas varias a la vez: ¿edad suficiente y puntuación alta? ¿miembro o invitado permitido? Las herramientas que unen o invierten esas respuestas son los operadores lógicos: &&, || y !. Ya conoces truthy y falsy; aquí aprendes a leer los tres símbolos cotidianos y a confiar en el boolean que producen.

¿Qué es un operador lógico?

Un operador lógico trabaja con valores parecidos a boolean. No guarda en un nombre (=) ni pregunta «¿mismo valor?» (===). Combina o invierte resultados sí/no. Tras true && false el resultado es false. Tras true || false es true. Tras !false es true. Puedes registrar ese boolean, guardarlo en una variable o escribirlo en la página.

Los operadores de un vistazo

📊 Operadores lógicos cotidianos

Operador Lectura cotidiana Resultado típico
&& ¿pasan ambos lados? true && true → true
! invertir sí/no !false → true

Ten esta hoja a mano. Para principiantes, alimenta estos operadores con booleanos claros de comparaciones (age >= 18) o los literales true / false. Otros valores también cuentan como truthy o falsy, pero empezar con sí/no honestos evita bugs.

AND con &&

javascript 
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
let ok = true;
console.log(ok && true);

&& necesita ambos lados

Dos ampersands significan «y». Ambos lados deben ser truthy para que toda la expresión sea truthy. Si falla el izquierdo, la respuesta combinada ya es no — no hay un «medio sí».

La consola imprime true, false, false, false, true. Solo la primera y la última línea pasan ambos lados. Piensa en una puerta con dos cerraduras: ambas llaves deben funcionar.

OR con ||

javascript 
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
let guest = false;
console.log(guest || true);

|| necesita un lado

Dos barras verticales significan «o». Si cualquier lado es truthy, toda la expresión es truthy. Solo cuando ambos lados fallan obtienes false.

Ves true, true, true, false, true. Solo la cuarta línea es un fallo total. Un camino abierto basta — como una puerta con dos llaves distintas donde cualquiera abre.

NOT con !

javascript 
console.log(!true);
console.log(!false);
let ready = false;
console.log(!ready);
let open = true;
console.log(!open);

! invierte la respuesta

Un solo ! delante significa «no». Truthy pasa a falsy y al revés. !ready sirve cuando quieres «¿aún no está listo?» sin reescribir una comparación más larga.

La consola imprime false, true, true, false. ready era false, así que !ready es true. open era true, así que !open es false.

Unir resultados de comparación

javascript 
let age = 20;
let score = 75;
console.log(age >= 18 && score >= 60);
console.log(age >= 18 && score >= 90);
let member = false;
let pass = true;
console.log(member || pass);

Une comparaciones en una sola comprobación

La lógica cotidiana casi siempre envuelve resultados de comparación. age >= 18 && score >= 60 hace dos preguntas de rango y las une con «y». member || pass pregunta si hay algún camino abierto. Deja === / >= para las preguntas; && / || para combinar las respuestas.

Guardar un flag combinado

javascript 
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
console.log(allowed);
let member = false;
let guestOk = true;
let enter = member || guestOk;
console.log(enter);

allowed es true (pasan ambas comprobaciones). enter es true porque la vía de invitado está abierta aunque member sea false. La expresión lógica ya produjo el boolean — solo le diste un nombre.

Mostrar una puerta en la página

Calcula un boolean combinado y escribe una etiqueta corta en la página.

Puerta de página con operadores lógicos

html 
<!DOCTYPE html>
<html>
<head>
<title>Logical — page gate</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
let box = document.getElementById("out");
box.textContent = "allowed=" + allowed;
</script>
</body>
</html>

age es 20 y score es 75, ambos lados de && pasan y la página muestra allowed=true. Baja score a 50, recarga y deberías ver allowed=false. Más adelante ramificarás con if; esta demo solo imprime el sí/no combinado.

Pruébalo tú

  1. Registra true && false y true || false.
  2. Registra !false y !true.
  3. Pon let age = 16 y registra age >= 18 && age < 65.
  4. Pon let age = 30 y registra la misma comprobación de rango.
  5. Mira false || true junto a false && true y nota la diferencia.
  6. En la demo HTML cambia solo score, recarga y lee el nuevo texto allowed=.

Errores frecuentes

  • Escribir un solo & o | — los principiantes quieren && y ||
  • Usar && cuando querías === (combinar vs. «¿igual?»)
  • Esperar que && compare dos números solo — envuelve cada lado en una comparación primero
  • Olvidar que ! invierte todo el boolean delante
  • Meter valores confusos antes de leer truthy/falsy con calma — empieza con resultados claros de comparación

Resumen

  • Los operadores lógicos combinan o invierten resultados sí/no
  • && necesita ambos lados; || al menos uno; ! invierte
  • Une resultados de comparación (age >= 18 && score >= 60) para comprobaciones cotidianas
  • Guarda el boolean si quieres un nombre; muéstralo en la página si quieres una etiqueta
  • Los símbolos de comparación y los lógicos tienen trabajos distintos
  • Siguiente: if-else — usar estos booleanos para elegir qué código se ejecuta

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 20 de 22
Javascript Tutorial