Lesson 46 min read

Conditionals

Teach your code to make decisions — like a choose-your-own-adventure book

If / Else — The Decision Maker

Imagine you're at a fork in the road. If it's raining, you grab an umbrella. Otherwise, you wear sunglasses. That's exactly what if / else does — it lets your code choose a path based on whether a condition is true or false.

You can chain multiple conditions with else if to handle more than two possibilities. JavaScript checks them top to bottom and runs the first block that matches.

If / Else If / Else

let temperature = 35;

if (temperature > 30) {
  console.log("It's scorching! Stay hydrated 🥵");
} else if (temperature > 20) {
  console.log("Nice weather! Go for a walk 😎");
} else if (temperature > 10) {
  console.log("A bit chilly. Grab a jacket 🧥");
} else {
  console.log("Freezing! Stay inside 🥶");
}

// Single-line if (no braces needed, but be careful)
let age = 20;
if (age >= 18) console.log("You can vote!");

Output

It's scorching! Stay hydrated 🥵
You can vote!

Truthy & Falsy — JavaScript's Weird Truth System

In JavaScript, if doesn't just work with true and false. It works with any value. JavaScript decides whether a value is "truthy" (treated as true) or "falsy" (treated as false).

There are exactly 7 falsy values. Everything else is truthy:

false — obviously
0 — zero is falsy
-0 — negative zero (yes, it exists)
0n — BigInt zero
"" — empty string
null
undefined
NaN

Everything else — including "0" (string zero), [] (empty array), and {} (empty object) — is truthy. This trips up a lot of people!

Truthy/Falsy Surprises

// These are all FALSY
if (!false)     console.log("false is falsy");
if (!0)         console.log("0 is falsy");
if (!"")        console.log("empty string is falsy");
if (!null)      console.log("null is falsy");
if (!undefined) console.log("undefined is falsy");
if (!NaN)       console.log("NaN is falsy");

// These are TRUTHY (surprise!)
if ("0")   console.log("'0' (string) is truthy!");
if ([])    console.log("[] (empty array) is truthy!");
if ({})    console.log("{} (empty object) is truthy!");

// Common pattern: check if a string has content
let username = "";
if (username) {
  console.log(`Welcome, ${username}`);
} else {
  console.log("Please enter a username");
}

Output

false is falsy
0 is falsy
empty string is falsy
null is falsy
undefined is falsy
NaN is falsy
'0' (string) is truthy!
[] (empty array) is truthy!
{} (empty object) is truthy!
Please enter a username

Switch, Ternary & Nullish Coalescing

Switch is great when you're comparing one value against many possible matches — like a vending machine matching a button press to a drink.

The ternary operator (condition ? valueIfTrue : valueIfFalse) is a compact if/else that fits in a single expression. Perfect for assigning values based on a condition.

The nullish coalescing operator (??) provides a default value when something is null or undefined. It's more precise than || because it doesn't treat 0 or "" as "empty."

Switch & Ternary Patterns

// Switch — match a value against cases
let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("Red or green?");
    break;
  case "banana":
    console.log("Goes great in smoothies!");
    break;
  case "cherry":
  case "strawberry":
    console.log("Berry delicious!"); // multiple cases, one block
    break;
  default:
    console.log("Never heard of that fruit!");
}

// Ternary — compact if/else
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(`Grade: ${grade}`);

// ?? vs || for defaults
let volume = 0;
console.log(volume || 50);  // 50 (wrong! 0 is a valid volume)
console.log(volume ?? 50);  // 0  (correct! 0 is not null/undefined)

Output

Red or green?
Grade: B
50
0

Note: Forget the break in a switch case? JavaScript will "fall through" and run ALL the code below it until it hits a break or the end of the switch. This is a feature (useful for grouping cases), but it's a common source of bugs. Some devs avoid switch entirely and use objects or if/else chains instead.

Quick check

Which of these values is TRUTHY in JavaScript?

← Strings & Template Literals Loops →