Booleans & Comparison

true/false, == vs === (the most important JS lesson), the falsy list, and logical operators.

What it is, in plain English: A boolean is simply true or false — yes or no, on or off. JavaScript uses booleans to make decisions. The critical lesson for every JavaScript learner: always use === (triple equals) for comparison, never == (double equals). Triple equals checks value AND type; double equals does type conversion first and produces results that surprise everyone.

Making decisions: true, false, and comparison

Programs make decisions constantly — "is the user logged in?", "is the price above $100?", "did the form field get filled in?" The answer to these questions is always either true or false. That's a boolean.

The most important rule in JavaScript

Always use === (triple equals) for comparison. Never use == (double equals). This is the single most important habit to build in JavaScript.

Here's why:

// === checks: same value AND same type?
console.log(5 === 5);       // true  ✓ — both are the number 5
console.log(5 === "5");     // false ✓ — one is a number, one is a string
console.log(0 === false);   // false ✓ — 0 is a number, false is a boolean

// == checks: same value AFTER converting types (dangerous!)
console.log(5 == "5");      // true  ✗ — JS converted "5" to 5
console.log(0 == false);    // true  ✗ — JS converted false to 0
console.log("" == false);   // true  ✗ — both became 0
console.log(null == undefined); // true ✗ — special case

The == operator converts types before comparing — this is called type coercion. The results are often not what you'd expect. Triple === never converts — it compares exactly as-is. Use it always.

Comparison operators

let age = 25;

console.log(age === 25);   // true  — equal to
console.log(age !== 18);   // true  — NOT equal to (use !== not !=)
console.log(age > 18);     // true  — greater than
console.log(age < 30);     // true  — less than
console.log(age >= 25);    // true  — greater than OR equal to
console.log(age <= 24);    // false — less than OR equal to

The falsy list — values that act like false

JavaScript has exactly 6 falsy values — values that behave like false in an if condition. Everything else is truthy (including "0", "false", [], {}).

false

the boolean false itself

0

the number zero (also -0 and 0n)

""

empty string (any empty string)

null

null value

undefined

undefined value

NaN

Not a Number

// These DON'T run (falsy):
if (0)         { console.log("nope"); }
if ("")        { console.log("nope"); }
if (null)      { console.log("nope"); }
if (undefined) { console.log("nope"); }

// These DO run (truthy — might surprise you):
if ("0")       { console.log("yes — '0' is a non-empty string"); }
if ([])        { console.log("yes — empty array is truthy"); }
if ({})        { console.log("yes — empty object is truthy"); }
if (-1)        { console.log("yes — any non-zero number is truthy"); }

This matters for checking if a value exists:

let username = getUserInput();   // might be "" or null or "Alice"

// ✓ Common pattern — check if username is "truthy" (non-empty, non-null)
if (username) {
  console.log(`Welcome, ${username}!`);
} else {
  console.log("Please enter a username.");
}

Logical operators: AND, OR, NOT

// && (AND) — true only if BOTH sides are true
console.log(true && true);    // true
console.log(true && false);   // false
console.log(5 > 3 && 10 > 7); // true

// || (OR) — true if AT LEAST ONE side is true
console.log(false || true);   // true
console.log(false || false);  // false
console.log(5 > 10 || 1 > 0); // true

// ! (NOT) — flips true to false and vice versa
console.log(!true);           // false
console.log(!false);          // true
console.log(!0);              // true (0 is falsy, !falsy = true)
console.log(!"hello");        // false ("hello" is truthy, !truthy = false)

Try It Yourself

// Booleans: just true or false
let isLoggedIn = true;
let isAdmin = false;

// === (triple equals) — ALWAYS use this for comparison
console.log(5 === 5);         // true  — same value, same type
console.log(5 === "5");       // false — different types (number vs string)
console.log(null === null);   // true
console.log(null === undefined); // false — different types

// == (double equals) — AVOID this (surprising results)
console.log(5 == "5");        // true  — JS converted "5" to 5 first!
console.log(0 == false);      // true  — JS converted false to 0!
console.log(null == undefined); // true — special rule

// The falsy values — these all behave like false in an if:
if (0)         { console.log("0 is truthy"); }    // doesn't run
if ("")        { console.log("empty string"); }   // doesn't run
if (null)      { console.log("null"); }           // doesn't run
if (undefined) { console.log("undefined"); }      // doesn't run
if (NaN)       { console.log("NaN"); }            // doesn't run
console.log("Everything else is truthy!");

// Logical operators
let x = 10;
console.log(x > 5 && x < 20);  // true  — AND: both must be true
console.log(x > 20 || x < 5);  // false — OR: at least one must be true
console.log(!isLoggedIn);        // false — NOT: flips the value

Short-circuit evaluation, nullish coalescing, and optional chaining

Short-circuit evaluation

Logical operators don't just return true/false — they return one of their operands. Evaluation stops as soon as the result is determined:

// && returns the first falsy value, or the last value if all are truthy:
console.log(1 && 2 && 3);      // 3    — all truthy, returns last
console.log(1 && null && 3);   // null — first falsy value
console.log(0 && "hello");     // 0    — first falsy value

// || returns the first truthy value, or the last value if all are falsy:
console.log(null || "default");   // "default" — first truthy
console.log("Alice" || "Bob");    // "Alice"   — first truthy
console.log(null || 0 || "");     // ""        — last value (all falsy)

This powers a common pattern — default values:

function greet(name) {
  name = name || "stranger";   // use name if truthy, else "stranger"
  return `Hello, ${name}!`;
}
console.log(greet("Alice"));  // "Hello, Alice!"
console.log(greet(""));       // "Hello, stranger!" — BUT "" is falsy, so this might surprise

Nullish coalescing operator: ?? (ES2020)

?? solves the "what if 0 or '' is a valid value?" problem. It only falls back to the right side if the left side is null or undefined (not 0, not ""):

// || treats 0 and "" as falsy — often wrong for user inputs:
let count = 0;
console.log(count || 10);    // 10 — wrong! 0 is a valid count

// ?? only checks for null/undefined:
console.log(count ?? 10);    // 0  — correct! 0 is not null/undefined

let name = "";
console.log(name || "anonymous");   // "anonymous" — might not want this
console.log(name ?? "anonymous");   // ""           — empty string is valid

Optional chaining: ?. (ES2020)

Access nested properties safely without a chain of if checks:

const user = { profile: { name: "Alice", address: { city: "Mumbai" } } };
const emptyUser = null;

// Old way — defensive checks required:
const city = user && user.profile && user.profile.address && user.profile.address.city;

// Modern way with ?.:
const city2 = user?.profile?.address?.city;   // "Mumbai"
const city3 = emptyUser?.profile?.address?.city;  // undefined (no error!)

// Also works with method calls and array access:
const firstName = user?.getName?.();  // undefined if getName doesn't exist
const item = user?.items?.[0];        // undefined if items doesn't exist

Logical assignment operators (ES2021)

let a = null;
a ??= "default";     // assign if null or undefined
console.log(a);      // "default"

let b = 0;
b ||= 42;            // assign if falsy
console.log(b);      // 42

let c = 1;
c &&= c * 2;         // assign if truthy
console.log(c);      // 2

Abstract Equality, the Abstract Relational Comparison, and SameValue

The Abstract Equality Comparison (==) — ECMA-262 §7.2.15

The spec defines == via the IsLooselyEqual abstract operation. The full algorithm (simplified) for x == y:

If same type: use IsStrictlyEqual (===) — except NaN ≠ NaN
null == undefined → true; undefined == null → true
If one is Number and other is String: convert String to Number, retry
If one is Boolean: convert Boolean to Number (false→0, true→1), retry
If one is Object and other is String/Number/Symbol/BigInt: call ToPrimitive on the Object, retry
BigInt and Number: compare mathematically (no type error, but no conversion)
Otherwise: false

This is why [] == false is true: [] is Object → ToPrimitive("") → String → ToNumber(0), false → ToNumber(0); 0 == 0 → true.

The Strict Equality Comparison (===) — §7.2.16

IsStrictlyEqual: if different types, return false immediately. Then type-specific comparison: NaN → false (NaN ≠ NaN by spec). +0 === −0 → true (unlike Object.is). For objects: same reference only.

SameValue and SameValueZero

The spec defines multiple equality relations for internal use:

SameValue — like === but NaN = NaN and +0 ≠ −0. Used by Object.is()
SameValueZero — like SameValue but +0 = −0. Used by Map/Set key comparison and Array.prototype.includes()
IsStrictlyEqual (===) — NaN ≠ NaN, +0 = −0. Used by switch, indexOf

Object.is(NaN, NaN)    // true  — SameValue
[NaN].includes(NaN)    // true  — SameValueZero
[NaN].indexOf(NaN)     // -1    — IsStrictlyEqual (NaN !== NaN)

Abstract Relational Comparison (<)

For x < y, the spec calls AbstractRelationalComparison: first calls ToPrimitive on both with hint "number". If both results are strings, compares them by Unicode code unit sequence. Otherwise converts both to Number/BigInt and compares mathematically. This is why "10" < "9" is true (string comparison: "1" < "9") but 10 < 9 is false.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.