Loading...

JavaScript Logical Operators

Comparison gave you one yes/no answer. Real checks often need several answers at once: old enough and score high enough? member or guest pass? The tools that join or flip those answers are logical operators: &&, ||, and !. You already met truthy and falsy; here you learn to read the three everyday symbols and trust the boolean they produce.

What is a logical operator?

A logical operator works with boolean-like values. It does not store into a name (=) and it does not ask “same value?” (===). It combines or flips yes/no results. After true && false, the result is false. After true || false, the result is true. After !false, the result is true. You can log that boolean, keep it in a variable, or write it onto a page.

The operators at a glance

📊 Everyday logical operators

Operator Everyday reading Typical result
&& both sides pass? true && true → true
! flip yes/no !false → true

Keep this sheet nearby. For beginners, feed these operators clear booleans from comparisons (age >= 18) or the literals true / false. Other values still count as truthy or falsy, but starting with honest yes/no keeps bugs away.

AND with &&

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

&& needs both sides

Two ampersands mean “and.” Both sides must be truthy for the whole expression to be truthy. If the left side fails, the combined answer is already no — you do not get a “half yes.”

The Console prints true, false, false, false, true. Only the first and last lines pass both sides. Think of a door with two locks: both keys must work.

OR with ||

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

|| needs one side

Two pipes mean “or.” If either side is truthy, the whole expression is truthy. Only when both sides fail do you get false.

You see true, true, true, false, true. The fourth line is the only total miss. One open path is enough — like a door with two separate keys where either key opens it.

NOT with !

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

! flips the answer

A single ! in front means “not.” Truthy becomes falsy; falsy becomes truthy. !ready is useful when you want “is it still not ready?” without rewriting a longer comparison.

The Console prints false, true, true, false. ready was false, so !ready is true. open was true, so !open is false.

Join comparison results

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);

Join comparisons into one check

Everyday logic almost always wraps comparison results. age >= 18 && score >= 60 asks two ranking questions, then joins them with “and.” member || pass asks whether either path is open. Keep === / >= for the questions; keep && / || for combining the answers.

Store a combined flag

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 is true (both checks pass). enter is true because the guest path is open even though member is false. The logical expression already produced the boolean — you only named it.

Show a gate on the page

Compute one combined boolean, then write a short label into the page.

Page gate with logical operators

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 is 20 and score is 75, so both sides of && pass and the page shows allowed=true. Drop score to 50, refresh, and you should see allowed=false. Later lessons will branch with if; this demo only prints the combined yes/no.

Try it yourself

  1. Log true && false and true || false.
  2. Log !false and !true.
  3. Set let age = 16 and log age >= 18 && age < 65.
  4. Set let age = 30 and log the same range check.
  5. Log false || true next to false && true and notice the difference.
  6. In the HTML demo, change only score, refresh, and read the new allowed= text.

Common mistakes

  • Writing a single & or | — beginners want && and ||
  • Using && when you meant === (combine vs ask “same?”)
  • Expecting && to compare two numbers by itself — wrap each side in a comparison first
  • Forgetting that ! flips the whole boolean in front of it
  • Feeding muddy values before you can read truthy/falsy calmly — start with clear comparison results

Summary

  • Logical operators combine or flip yes/no results
  • && needs both sides; || needs at least one; ! flips
  • Join comparison results (age >= 18 && score >= 60) for everyday checks
  • Store the boolean when you want a name; show it on a page when you want a label
  • Keep comparison symbols and logical symbols in different jobs
  • Next: if-else — using these booleans to choose which code runs

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 20 of 22
Javascript Tutorial