⚖️ Comparison and Logical Operators

Operators That Ask Questions

Arithmetic operators produce values. Comparison and logical operators evaluate them — they answer yes/no questions and return a Boolean (true or false). Together they are the engine behind every if, every loop condition, and every filter.

💡 Analogy — the doorman. A club doorman checks IDs (comparison) and enforces several rules at once: "over 21 and on the guest list, or a member" (logical). Comparison and logical operators are how your code plays doorman over data.

Equality: === vs. ==

JavaScript has two equality operators, and the difference between them is one of the most important things a beginner learns.

// Loose (==) converts before comparing — the source of many bugs
console.log(5 == '5');            // true  (string → number)
console.log(0 == false);         // true  (false → 0)
console.log('' == 0);            // true  ('' → 0)
console.log(null == undefined);  // true  (special case)

// Strict (===) never converts — what you see is what you get
console.log(5 === '5');           // false (number vs string)
console.log(0 === false);         // false (number vs boolean)
console.log(null === undefined);  // false (different types)

💡 Analogy — two passport checks. Loose equality is a guard who only confirms you're the right person and ignores which kind of passport you carry. Strict equality checks the person and the passport type. The stricter check is the safer one.

Relational & String Comparison

The relational operators >, <, >=, and <= compare magnitude and return a Boolean. With numbers they behave exactly as you'd expect; with strings they compare lexicographically — character by character using Unicode code points.

// Numeric comparison
console.log(10 > 5);    // true
console.log(5 >= 5);    // true
console.log('10' > 5);  // true — the string '10' is coerced to number 10

// String comparison is dictionary-style, NOT numeric
console.log('apple' < 'banana'); // true  ('a' < 'b')
console.log('Apple' < 'apple');  // true  (uppercase code points come first)
console.log('10' < '9');         // true  ('1' < '9', so '10' sorts before '9'!)

For human-facing sorting of text — names, cities, anything with accents — use localeCompare(), which respects language rules:

const names = ['Zürich', 'Äpfel', 'Andres'];
names.sort((a, b) => a.localeCompare(b, 'de'));
console.log(names); // correct German ordering

// A tidy case-insensitive equality helper
const equalsIgnoreCase = (a, b) =>
  a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0;
console.log(equalsIgnoreCase('Hello', 'hello')); // true

Truthy, Falsy & Booleans

Logical operators don't require actual Booleans — they work on the truthiness of any value. It is quicker to memorise the short list of falsy values; everything else is truthy.

// The double-NOT idiom converts any value to a real boolean
console.log(!!'hello'); // true
console.log(!!0);       // false
console.log(!![]);      // true  — an empty array is truthy!
console.log(!!'');      // false

This matters because the surprising ones — [] is truthy, "0" is truthy — cause real bugs when used as conditions. When you specifically mean "is this array empty?", test arr.length === 0, not !arr.

Logical Operators & Short-Circuiting

The three core logical operators combine or invert conditions:

💡 Analogy — circuits. && is a series circuit: current flows only if every switch is on. || is a parallel circuit: current flows if any switch is on. ! is an inverter that flips on to off.

Short-circuit evaluation

JavaScript evaluates left to right and stops as soon as the answer is certain. && stops at the first falsy operand; || stops at the first truthy one. Crucially, they return the operand itself, not a coerced Boolean — which enables two everyday patterns:

// Guard: only read .name if user exists (avoids a TypeError)
const user = null;
console.log(user && user.name); // null — the right side is never touched

// Default: fall back when the left side is falsy
const input = '';
const label = input || 'Untitled';
console.log(label); // 'Untitled'

// Returning the operand, not just true/false
console.log('Hello' && 'World'); // 'World' (last truthy value)
console.log('' || 'Fallback');   // 'Fallback' (first truthy value)

function canEnter({ age, hasTicket, isMember }) {
  // Members always get in; everyone else needs to be 18+ with a ticket.
  return isMember || (age >= 18 && hasTicket);
}

console.log(canEnter({ age: 25, hasTicket: true,  isMember: false })); // true
console.log(canEnter({ age: 16, hasTicket: true,  isMember: false })); // false
console.log(canEnter({ age: 16, hasTicket: false, isMember: true  })); // true

Nullish Coalescing (??)

Using || for default values has a subtle flaw: it replaces every falsy value, including legitimate ones like 0, false, and "". The nullish coalescing operator ?? fixes this by falling back only when the left side is null or undefined.

// || treats 0 and '' as "missing" — often wrong
console.log(0  || 'default');  // 'default'  ← 0 was a valid value!
console.log('' || 'default');  // 'default'

// ?? only falls back for null / undefined
console.log(0  ?? 'default');  // 0          ← preserved
console.log('' ?? 'default');  // ''         ← preserved
console.log(null ?? 'default'); // 'default'
console.log(undefined ?? 'x');  // 'x'

💡 Analogy — the backup generator. ?? is a generator that only kicks in when the main power is completely out (null/undefined). A mere flicker — a 0 or an empty string — is still real power, so the generator stays off.

?? pairs naturally with optional chaining (?.), which safely reads deep properties that might not exist:

const user = { name: 'Alice', address: { city: 'New York' } };

// Old, verbose safe access
let country;
if (user && user.address && user.address.country) {
  country = user.address.country;
} else {
  country = 'Unknown';
}

// Modern one-liner
const country2 = user?.address?.country ?? 'Unknown';
console.log(country2); // 'Unknown'

The Ternary Operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands: condition ? valueIfTrue : valueIfFalse. It is an expression, so unlike an if statement it produces a value you can assign or return.

const age = 20;

// Instead of a four-line if/else...
const status = age >= 18 ? 'Adult' : 'Minor';
console.log(status); // 'Adult'

// Chained ternaries read like a lookup table (keep them shallow)
function greetingFor(hour) {
  return hour < 12 ? 'Good morning'
       : hour < 18 ? 'Good afternoon'
       : 'Good evening';
}
console.log(greetingFor(9));  // 'Good morning'
console.log(greetingFor(20)); // 'Good evening'

💡 Analogy — a signposted fork. The ternary is a fork in the road with one clear sign: true goes left, false goes right. Both paths rejoin at the next line — you just pick up a different value along the way.

Hands-on Exercise

function checkPassword(pw) {
  const result = { valid: false, errors: [], strength: 'weak' };

  if (typeof pw !== 'string' || pw.length === 0) {
    result.errors.push('Password is required');
    return result;
  }

  if (pw.length < 8)          result.errors.push('At least 8 characters');
  if (!/[A-Z]/.test(pw))      result.errors.push('One uppercase letter');
  if (!/[a-z]/.test(pw))      result.errors.push('One lowercase letter');
  if (!/\d/.test(pw))         result.errors.push('One number');
  if (!/[^A-Za-z0-9]/.test(pw)) result.errors.push('One symbol');

  result.valid = result.errors.length === 0;

  if (result.valid) {
    const bonuses = [
      pw.length >= 12,
      (pw.match(/\d/g) || []).length >= 3,
      (pw.match(/[^A-Za-z0-9]/g) || []).length >= 2
    ].filter(Boolean).length;

    result.strength = bonuses === 0 ? 'medium'
                    : bonuses === 1 ? 'strong'
                    : 'very strong';
  }
  return result;
}

console.log(checkPassword('abc'));          // valid:false, several errors
console.log(checkPassword('Passw0rd!'));    // valid:true,  strength:'medium'
console.log(checkPassword('Sup3r$ecret99')); // valid:true,  strength:'very strong'

Summary & Quiz

📚 Further Reading

• MDN — Expressions and Operators
• MDN — Nullish Coalescing Operator
• MDN — Truthy & Falsy
• JavaScript.info — Logical Operators

🚀 What's Next?

You've now met arithmetic, comparison, and logical operators. In Operator Precedence and Expressions you'll learn the rules that decide which operator runs first when you combine them — and how to keep complex expressions readable.