Conditionals
What are conditionals?
Conditionals let your program make decisions. They run different code depending on whether a condition is truthy or falsy.
const age = 20;
if (age >= 18) {
console.log("You are an adult");
}
The condition is age >= 18. Since that expression is true, JavaScript runs the code inside the braces.
Why this matters
Without conditionals, a program would run the same way every time. Conditionals let you respond to user input, validate data, handle errors, show different messages, and choose different behavior based on the current state of your program.
if statements
Use if to run code only when a condition is truthy:
const isLoggedIn = true;
if (isLoggedIn) {
console.log("Welcome back");
}
If the condition is falsy, JavaScript skips the block:
const isLoggedIn = false;
if (isLoggedIn) {
console.log("Welcome back");
}
console.log("This always runs");
if / else
Use else when you need a fallback:
const age = 15;
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}
Output:
You are a minor
Only one of the two blocks runs.
if / else if / else
Use else if when you need to check multiple conditions in order:
const score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
Output:
Grade: B
How it works:
- JavaScript checks
score >= 90. - If that is false, it checks
score >= 80. - Once it finds a truthy condition, it runs that block and skips the rest.
Only the first matching block runs.
Order matters
Put more specific checks before broader checks.
const score = 95;
if (score >= 70) {
console.log("Passing");
} else if (score >= 90) {
console.log("Excellent");
}
This prints "Passing" because JavaScript stops at the first matching block.
const score = 95;
if (score >= 90) {
console.log("Excellent");
} else if (score >= 70) {
console.log("Passing");
}
Check the narrow condition first when both conditions could be true.
Truthy and falsy conditions
Conditions do not have to be actual booleans. JavaScript uses truthy and falsy rules, covered in the data types guide.
const name = "Alice";
if (name) {
console.log("Name exists");
}
Empty strings, 0, null, undefined, false, and NaN are falsy:
const count = 0;
if (count) {
console.log("Has items");
}
That block does not run because 0 is falsy.
Be explicit when a specific value matters:
const count = 0;
if (count > 0) {
console.log("Has items");
}
Comparisons in conditions
Comparison operators create boolean values that conditionals can use:
const password = "secret";
if (password.length >= 8) {
console.log("Password is long enough");
} else {
console.log("Password is too short");
}
Use strict equality when comparing exact values:
const role = "admin";
if (role === "admin") {
console.log("Show admin tools");
}
Avoid loose equality in beginner code because it can coerce types:
console.log(0 == false); // true
console.log(0 === false); // false
Combining conditions
Use && when all conditions must be truthy:
const age = 25;
const hasLicense = true;
if (age >= 18 && hasLicense) {
console.log("Can drive");
}
Use || when at least one condition must be truthy:
const isWeekend = true;
const isHoliday = false;
if (isWeekend || isHoliday) {
console.log("No school today");
}
Use ! to invert truthiness:
const isLoading = false;
if (!isLoading) {
console.log("Ready");
}
When a combined condition gets hard to read, move part of it into a named variable:
const age = 25;
const hasLicense = true;
const hasInsurance = true;
const isAllowedToDrive = age >= 18 && hasLicense && hasInsurance;
if (isAllowedToDrive) {
console.log("Can drive");
}
switch
Use switch when you are checking one value against several cases:
const day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week");
break;
case "Friday":
console.log("Almost weekend");
break;
case "Saturday":
case "Sunday":
console.log("Weekend");
break;
default:
console.log("Regular day");
}
The default case runs when no case matches.
switch uses strict comparison, similar to ===, when matching cases:
const value = "1";
switch (value) {
case 1:
console.log("number");
break;
case "1":
console.log("string");
break;
}
This prints "string" because "1" and 1 are different values.
break in switch
Use break to stop the switch after a matching case:
const day = "Monday";
switch (day) {
case "Monday":
console.log("Monday");
break;
case "Tuesday":
console.log("Tuesday");
break;
}
Without break, JavaScript falls through to the next case:
const day = "Monday";
switch (day) {
case "Monday":
console.log("Monday");
// Missing break!
case "Tuesday":
console.log("Tuesday");
break;
}
Output:
Monday
Tuesday
Only leave out break when fall-through is intentional.
Conditional expressions
The ternary operator is a compact way to choose between two values:
const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"
This is equivalent to:
const age = 20;
let status;
if (age >= 18) {
status = "adult";
} else {
status = "minor";
}
Use ternaries for simple value selection. Use if / else when the logic takes more than one line or needs side effects.
Common patterns
Early returns
In functions, use early returns to handle invalid or edge cases first:
function getUserEmail(user) {
if (!user) {
return null;
}
if (!user.email) {
return null;
}
return user.email;
}
This keeps the main path less nested.
Guarding before using a value
function printName(user) {
if (!user) {
console.log("No user provided");
return;
}
console.log(user.name);
}
Check that a value exists before reading properties from it.
Flattening nested conditionals
Nested conditionals work, but they can get hard to read:
const age = 25;
const hasLicense = true;
if (age >= 18) {
if (hasLicense) {
console.log("Can drive");
}
}
Combine conditions when the logic is simple:
if (age >= 18 && hasLicense) {
console.log("Can drive");
}
Choosing the right conditional
- Use
iffor one decision. - Use
if/elsewhen there are two paths. - Use
else ifwhen checking multiple conditions in order. - Use
switchwhen one value has many possible cases. - Use a ternary for simple value selection.
- Use early returns inside functions to handle edge cases first.
Best practices
- Keep conditions readable: Move complex logic into a well-named variable.
- Check specific cases first: In an
else ifchain, the first matching block wins. - Be explicit when values matter: Use
count > 0instead ofif (count)when zero has meaning. - Use strict equality: Prefer
===and!==. - Avoid deep nesting: Combine simple conditions or return early.
- Include
breakinswitchunless fall-through is intentional. - Use ternaries sparingly: They are best for short value choices, not multi-step logic.
Summary
Conditionals let JavaScript choose which code to run. Use if, else, and else if for most decisions, switch for multiple cases based on one value, and ternaries for small value choices. Remember that JavaScript uses truthy and falsy values in conditions, so be explicit when values like 0, "", null, and undefined mean different things.