Logical Operators

In short: && and || don't just return true/false — they return one of their actual operands, and both stop reading as soon as they know the answer (called short-circuiting). && returns the first falsy value it meets, or the last value if every one is truthy. || returns the first truthy value it meets. ?? behaves like ||, but only treats null/undefined as empty — not 0, "", or false, which || would also skip past.

Safely read a nested property

&& chains are a common guard against reading a property of something that might not exist — it stops the instant something is falsy:

This prints undefined — user is truthy, so evaluation continues to user.plan, which is undefined (falsy). && stops right there and returns that undefined without ever touching user.plan.active, which would have thrown trying to read .active off undefined.

Pick the first name that's actually there

|| walks left to right and returns the first truthy value — perfect for a chain of fallbacks:

nickname is "", falsy, so || moves on. realName is "Ana", truthy — || stops there and returns it, never even looking at "Guest".

The trap: a real zero treated as missing

|| and ?? only disagree on one thing — what counts as "empty" — and that difference matters the moment 0 is a genuine value, not an absence:

0 ?? "default" is 0 — ?? only checks for null/undefined, and 0 is neither, so it's kept. 0 || "default" is "default" — || treats 0 as falsy and replaces it, even though 0 might be exactly the right answer (an empty cart, a muted volume, zero items in stock). Use ?? when 0, "", or false are meaningful values you want to keep.

Quick practice

🎯 Your turn

A product page shows stock || "Out of stock" to display how many are left. Trace this against stock = 0 (genuinely zero left), then trace stock ?? "Out of stock" against the same value, and explain why ?? is the better choice here.

Write your explanation and submit it — there's no code to run here, just your reasoning.