Conditionals
Learn how to make your code make decisions with if statements and conditional logic.
Life is full of decisions: "If it's raining, take an umbrella. Otherwise, wear sunglasses." Conditionals let your code make these same kinds of decisions based on different situations.
Why We Need Conditionals
Without conditionals, code would run the same way every single time. But real programs need to respond to different situations—a game needs to know if you won or lost, a website needs to know if you're logged in or not.
Real-World Analogy
Think of a traffic light. If it's green, you go. Else if it's yellow, you slow down. Else (it's red), you stop. That's exactly how conditionals work!
The if Statement
The most basic conditional is the if statement. It runs code only when a
condition is true.
let temperature = 30;
if (temperature > 25) {
console.log("It's hot outside!");
}
// This prints because 30 > 25 is true The structure is:
if— The keyword that starts the conditional(condition)— A true/false expression in parentheses{ code }— The code block that runs if the condition is true
Adding else
What if you want to do something different when the condition is false? That's what
else is for.
let age = 15;
if (age >= 18) {
console.log("You can vote!");
} else {
console.log("You're not old enough to vote yet.");
}
// Since 15 < 18, the else block runs Multiple Conditions with else if
When you have more than two possibilities, use else if to check additional
conditions.
let 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 if (score >= 60) {
console.log("Grade: D");
} else {
console.log("Grade: F");
}
// Output: "Grade: B" Important: Order Matters!
Conditions are checked from top to bottom. Once one is true, the rest are skipped.
If you checked score >= 70 first, scores of 90+ would incorrectly get
a C!
Try It Yourself
Combining Conditions
You can combine multiple conditions using logical operators:
let age = 25;
let hasLicense = true;
// AND (&&) - both must be true
if (age >= 16 && hasLicense) {
console.log("You can drive!");
}
// OR (||) - at least one must be true
if (age < 13 || age > 65) {
console.log("You get a discount!");
}
// NOT (!) - reverses true/false
if (!hasLicense) {
console.log("You need to get a license first.");
} Nested Conditionals
You can put conditionals inside other conditionals for more complex decisions:
let isWeekend = true;
let isRaining = false;
if (isWeekend) {
if (isRaining) {
console.log("Watch a movie at home");
} else {
console.log("Go to the park!");
}
} else {
console.log("Go to work/school");
} The Ternary Operator
For simple if/else statements, there's a shorthand called the ternary operator:
// Long way
let message;
if (age >= 18) {
message = "Adult";
} else {
message = "Minor";
}
// Short way using ternary operator
let message = age >= 18 ? "Adult" : "Minor";
// condition ? valueIfTrue : valueIfFalse When to Use Ternary
- • Simple true/false assignments
- • Quick inline decisions
- • When code fits on one line
When NOT to Use Ternary
- • Complex conditions
- • Multiple statements to execute
- • When it hurts readability
Truthy and Falsy Values
JavaScript treats some values as "falsy" (act like false) and others as "truthy" (act like true):
// These are FALSY (treated as false):
// false, 0, "", null, undefined, NaN
if (0) {
console.log("This won't run");
}
if ("Hello") {
console.log("Non-empty strings are truthy!");
}
// Useful for checking if something exists:
let username = "";
if (username) {
console.log("Welcome, " + username);
} else {
console.log("Please enter your name");
} Quick Quiz
Key Takeaways
ifruns code when a condition is trueelseruns code when the if condition is falseelse ifchecks additional conditions- Conditions are checked in order—first true condition wins
- Use
&&(AND),||(OR),!(NOT) to combine conditions - The ternary operator (
? :) is shorthand for simple if/else
What's Next?
Now that your code can make decisions, let's learn about loops—how to repeat code without writing it over and over again!
Finished this concept?
Mark it complete to track your progress