JavaScript Booleans and Conditionals
Learn how JavaScript decides: === versus ==, the short-circuit logic operators, truthiness and its falsy list, and the if and switch statements.
Basic
JavaScript's conditionals look familiar from other languages and then add two twists of its own. The first is a pair of equality operators with different philosophies, and a settled community answer about which to use. The second is an aggressively helpful type conversion, applied almost anywhere a value meets a condition, which is why JavaScript's small falsy list is worth memorizing word for word.
=== and the operator it retired
Three equals compare value and type with no conversions:
5 === "5" is false, and that clarity is why strict equality is the community default
, written without comment in every serious codebase. Its two-equal sibling applies a conversion table before comparing, so
5 == "5" is true and
"" == 0 is true, and the table is long enough that nobody holds it in their head honestly. The one defensible job left for
== is testing against both
null and
undefined at once,
value == null, a habit some codebases keep and most simply replace with an explicit pair of strict checks.
Logic that short-circuits
&& returns when both sides are truthy,
|| when either is, and both stop evaluating at the moment the answer is known, the property that makes
orders && orders.length a safe two-part test. The modern
??, nullish coalescing, fills in a default only for
null or
undefined, leaving
0 and
"" alone, which
|| would have swallowed:
count || 10 turns a legitimate zero into ten,
count ?? 10 keeps it. Choosing between them is choosing whether zero and empty string mean something in your data, and they usually do.
Truthiness and the falsy seven
Any value can stand in a condition. The falsy list is short and worth reciting:
false,
null,
undefined,
0 and
NaN, and the empty string
"". Everything else is truthy, including
"0",
"false", and every array, including the empty array
, a trap for anyone arriving from Python, where empty containers are falsy. When the emptiness of an array is the question, ask it directly with
items.length === 0.
if, else if, else, and switch
|
|
The ladder, tested top to bottom, one block runs.
Braces around block bodies are optional for single statements and always worth writing anyway; the omitted-brace bug, a second line silently outside the branch, has embarrassed every long career. When a dozen branches all test the same expression against fixed values,
switch with
case labels and explicit
break statements states the shape more plainly, and forgetting a break makes execution fall through into the next case, occasionally useful, famously error-prone, always worth a comment when intended.
Put the machinery to work
The example below is an order gate combining the lesson's tools, writing to the preview console. Run it, then change the facts at the top and predict each line before running again. Two experiments pay for themselves: set
discount to 0 and watch
|| replace it with 10 while
?? keeps it, the whole lesson in one line; and change
if (hour === 8) to the single-equals typo to see the branch run with no complaint from anyone.
Output
Ready to run.
What to notice
Exactly one ladder rung ran, the first whose condition held.
The
orders && orders.lengthline never crashed on an empty array, because&&stopped at the first falsy fact.Zero survived
??and was replaced by||, the distinction that decides which one a default belongs to.
Quick check
If you can recite the falsy list, explain when
?? beats
||, and say why the single-equals condition runs instead of failing, your programs can decide safely. Next, functions. When you are ready, take the Booleans and Conditionals quiz.
Thanks for your feedback.
Mark this learning resource complete to track your learning progress.