By the end of this lesson, you will be able to run JavaScript code only when a condition is true using an if statement.
What it is
An if statement is a control-flow structure that checks a condition and runs a block of code only when that condition evaluates to true. The mental model is a gate: the condition is the lock, and the block is the room you enter only if the lock opens.
Related terms include condition, block, truthy, falsy, else, and else if. In JavaScript, values such as 0, "", null, undefined, NaN, and false are falsy; most other values are truthy.
Why it matters
- It lets programs respond to user input, such as checking whether a form field is empty.
- It protects code from invalid states, such as preventing division by zero.
- It supports branching logic, such as showing different messages for different roles.
- It helps validate data before processing it, such as checking age or permissions.
- It is the foundation for more complex decision-making with
else ifandelse.
Syntax or steps
The smallest useful pattern is:
if (condition) {
// code to run when condition is true
}Steps:
- Write the keyword
if. - Put a condition inside parentheses.
- Open a block with curly braces.
- Place the statements to run inside the block.
For multiple branches, use else if and else:
if (condition1) {
// first branch
} else if (condition2) {
// second branch
} else {
// fallback branch
}Example
const score = 95;
if (score > 90) {
console.log("A");
} else if (score > 80) {
console.log("B");
} else {
console.log("C or lower");
}Part-by-part explanation:
const score = 95;stores a number to test.if (score > 90)checks whether the score is greater than 90.console.log("A");runs only when the first condition is true.else if (score > 80)is checked only if the first condition was false.elseruns when none of the previous conditions were true.
Because 95 > 90 is true, this example prints A.
Common mistakes
- Using
=instead of===.=assigns a value, while===compares it. Use===when checking equality. - Forgetting curly braces. You can omit them for one statement, but braces make code safer and easier to read.
- Assuming every value is boolean. JavaScript converts values to truthy or falsy. If you need exact checks, compare explicitly.
- Writing unreachable branches. If an earlier condition is too broad, later branches may never run. Order conditions from most specific to most general.
When to use it
Use if when you need to run statements based on conditions. Compare it with the ternary operator, which is better for choosing a value in a compact expression.
| Tool | Best for | Example |
|---|---|---|
if | Running blocks of statements | if (score > 90) { console.log("A"); } |
| Ternary operator | Choosing one value | const grade = score > 90 ? "A" : "B"; |
switch | Many exact values | switch (status) { case "active": ... } |
Use if for ranges, complex conditions, and side effects. Use ternary for simple value selection. Use switch when comparing one variable against many fixed values.
Practice
Guided exercise: Write an if statement that prints "Adult" when age is 18 or older, and "Minor" otherwise.
const age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}Expected output: Adult.
Challenge: Extend the code so it prints "Teen" when age is between 13 and 17, "Adult" when 18 or older, and "Child" otherwise.
Solution hint: Use else if and check the teen range before the adult range.
Quick check
Question: What happens if the condition in an if statement is false?
Answer: The code inside the if block is skipped. If there is an else block, that block runs instead.
Summary
An if statement lets JavaScript make decisions by running code only when a condition is true. It is the basic building block for branching logic, validation, and user interaction.