Two Outcomes
if...else lets you define both the true branch and the false branch.
This is the most common pattern for binary decisions.
JavaScript Tutorial
JavaScript if...else Statement
The if...else statement provides two clear paths: one for true and one for false.
It is the most common conditional structure in day-to-day JavaScript.
Why We Need It
Most decisions are binary: success or failure, logged in or logged out.
if...else keeps both outcomes explicit, making logic easier to maintain.
Syntax
if (condition) { ... } else { ... }Basic Example
1. Basic if...else
const isMember = true;
if (isMember) {
console.log("Member price");
} else {
console.log("Standard price");
}Two branches for two outcomes.
Real World Example
2. UI State
const items = [];
if (items.length > 0) {
console.log("Show list");
} else {
console.log("Show empty state");
}if...else is common for UI rendering decisions.
Multiple Use Cases
User Flow
Use if...else for login states, toggles, and empty vs populated UI states.
It keeps your logic explicit and predictable.
Keep Branches Small
Large if/else blocks are hard to test. Extract logic into functions when needed.
Small branches are easier to read and maintain.
More Examples
3. Permissions
const role = "editor";
if (role === "admin") {
console.log("All access");
} else {
console.log("Limited access");
}Handle a yes/no permission check.
4. Boolean Coercion
const name = "";
if (name) {
console.log("Hello", name);
} else {
console.log("Hello, guest");
}Empty strings are falsy, so be explicit if needed.
Comparison
Without
let message;
if (isLoggedIn) {
message = "Welcome";
} else {
message = "Please sign in";
}With
const message = isLoggedIn ? "Welcome" : "Please sign in";Common Mistakes and Fixes
Using else when you should return early
Consider guard clauses to reduce nesting.
Mixing many conditions
Use else if ladder or switch for multiple branches.
Relying on falsy values unintentionally
Check for empty strings or zero explicitly if needed.
Large branches
Extract repeated logic into helper functions.
Interview Questions
What does if...else do?
It selects between two branches based on a condition.
When should you avoid nested if...else?
When it reduces readability; prefer guard clauses or switch.
Is else mandatory?
No, use it only when you need a fallback branch.
Practice Problem
Practice: Show a free-shipping message if total is over 100, otherwise show the shipping fee.
const total = 75;
// TODO: log the correct message
One Possible Solution
const total = 75;
if (total > 100) {
console.log("Free shipping");
} else {
console.log("Shipping fee applies");
}Frequently Asked Questions
When should I use if...else?
Use it for two mutually exclusive outcomes.
Is if...else better than ternary?
Use ternary for simple expressions and if...else for larger blocks.
Can if...else be nested?
Yes, but deep nesting hurts readability.
Try It Yourself
Modify the condition to see which branch runs.