The Shape of an if Statement
An if statement runs a block of code only when a condition is true. The shape is a keyword, a condition in parentheses, and a block in curly braces:
The condition age >= 18 evaluates to true, so the block runs. If age were 16, the condition would be false and JavaScript would skip the block entirely.
The curly braces are technically optional when the block is a single statement, but always use them. Braceless if statements are a classic source of bugs when someone later adds a second line and forgets they're not actually inside the block.
else: The Fallback Branch
Pair if with else to run different code when the condition is false:
Exactly one of the two branches runs. Never both, never neither. else doesn't take a condition of its own — it's the catch-all for "the if was false."
else if: Picking From Several Options
When you have more than two cases, chain them with else if. JavaScript checks each condition in order and stops at the first one that's true:
Only one branch runs. Once a condition matches, the rest are skipped — even if they'd also be true. That's why the order matters: if you flipped the chain to check score >= 60 first, everyone above 60 would get a D.
The final else is optional, but including it makes your intent clear: "if nothing else matched, do this."
Conditions Can Be Any Expression
The thing inside the parentheses doesn't have to be a comparison. It can be any expression — JavaScript coerces the result to a boolean:
Non-empty strings are truthy. 0 and empty strings are falsy, so items.length being 0 takes the else branch. This is the standard JavaScript idiom for "check if there's something there."
The full list of falsy values is small and worth memorizing: false, 0, -0, 0n, "", null, undefined, and NaN. Everything else is truthy — including "0", "false", [], and {}. Those last two catch people out.
Combining Conditions: && and ||
Use && (and) and || (or) to combine conditions:
&& requires both sides to be truthy. || requires at least one. Both short-circuit: && stops at the first falsy value, || stops at the first truthy one. That matters when the second condition has a side effect or would throw — user && user.name safely returns undefined if user is null, without blowing up.
Wrap mixed logic in parentheses to make precedence obvious:
Without the parentheses, && binds tighter than ||, which is usually the opposite of what reads naturally.
== vs === (Use ===)
When checking equality inside an if, use === and !==, not == and !=:
== coerces types before comparing, which leads to surprises like "" == 0 being true and null == undefined being true. === compares without coercion — same type and same value. Default to ===. The only common exception is x == null, which checks for both null and undefined in one go.
The Ternary Operator
For choosing between two values, the ternary operator condition ? a : b is often cleaner than a full if/else:
The ternary is an expression — it produces a value. That's the key difference from if/else, which is a statement. Use the ternary when you need the result (assigning a variable, returning, building a string). Use if/else when you're running side effects.
You can chain ternaries, but readability falls off a cliff:
// Don't do this:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
If you're chaining, go back to else if.
Nested if vs. Flat else if
Sometimes one condition only makes sense inside another. Nesting is fine for that:
But nesting three or four levels deep is a code smell. Flatten it with early returns or a combined condition:
Early returns keep each branch short and at the same indent level. Much easier to scan than a pyramid of nested ifs.
A Common Pitfall: Assignment Inside if
= assigns. === compares. Mixing them up inside a condition is a classic bug:
status = "done" assigns "done" to status and evaluates to "done", which is truthy — so the block always runs, and you've silently overwritten the variable. Linters catch this. Strict mode doesn't. Just be careful, and reach for === when you mean to compare.
Next: switch
When you're comparing one value against many possible matches, a long else if chain starts to feel repetitive. JavaScript's switch statement is built for exactly that case — and it comes with its own quirks around break and fall-through, which is up next.
Frequently Asked Questions
How do you write an if/else statement in JavaScript?
Put a condition in parentheses after if, then a block in curly braces. Follow it with else and another block for the fallback. Example: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. The condition can be any expression — JavaScript coerces it to a boolean.
What's the difference between else if and nested if in JavaScript?
else if chains conditions so only one branch runs — JavaScript checks each condition in order and stops at the first match. Nested if statements put one inside another, usually to check a second condition only when the first was true. Flat else if chains are almost always easier to read than deeply nested ifs.
When should I use the ternary operator instead of if/else?
Use the ternary condition ? a : b when you're picking between two values in an expression — assigning a variable, returning from a function, building a string. Stick with if/else when branches run statements with side effects or when either side is more than a short expression. Chained ternaries get unreadable fast.
Why does if (0) behave differently than if (false) in JavaScript?
It doesn't — both skip the block. JavaScript coerces the condition to a boolean, and 0, '', null, undefined, NaN, and false are all falsy. The gotcha is that values like '0' (a non-empty string) and [] (an empty array) are truthy, which surprises people coming from other languages.
