JavaScript: JavaScript Conditional Statements

Last updated: 2026-10-13

Conditional statements give your program the power to make decisions — taking different paths based on different situations. Without them, your code would just run top to bottom with no branching; with them, your program can think and choose like a human.

Related Statements：if...else switch

1. if Statement

The most basic conditional: if the condition is true, execute the code inside the curly braces.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if Statement</title></head>
<body>
<div id="output"></div>
<script>
let age = 20;
if (age >= 18) {
  document.getElementById('output').textContent = 'You are an adult';
}
</script>
</body>
</html>

You can omit the curly braces when there's only one statement inside, but it's strongly discouraged — braces make your code clearer and prevent bugs when you add more statements later.

2. if...else Statement

A binary choice: if the condition is true, run the if block; otherwise, run the else block.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if...else</title></head>
<body>
<div id="output"></div>
<script>
let score = 45;
if (score >= 60) {
  document.getElementById('output').textContent = 'Passed!';
} else {
  document.getElementById('output').textContent = 'Not passed, keep trying';
}
</script>
</body>
</html>

3. if...else if...else

Multiple conditions evaluated from top to bottom — the first one that matches gets executed, and the rest are skipped:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if...else if</title></head>
<body>
<div id="output"></div>
<script>
let score = 85;
if (score >= 90) {
  document.getElementById('output').textContent = 'Excellent';
} else if (score >= 80) {
  document.getElementById('output').textContent = 'Good';
} else if (score >= 60) {
  document.getElementById('output').textContent = 'Pass';
} else {
  document.getElementById('output').textContent = 'Fail';
}
</script>
</body>
</html>

▶ Example: Grade Calculator

4. Ternary Operator

The ternary operator is a shorthand for if...else, ideal for simple binary choices:

<script>
// Syntax: condition ? value1 : value2
let age = 20;
let status = age >= 18 ? 'Adult' : 'Minor';

// Equivalent to:
let status2;
if (age >= 18) {
  status2 = 'Adult';
} else {
  status2 = 'Minor';
}
</script>

5. switch Statement

When checking a single variable against multiple fixed values, switch is cleaner than if...else if:

<script>
let day = 3;
switch (day) {
  case 1: console.log('Monday'); break;
  case 2: console.log('Tuesday'); break;
  case 3: console.log('Wednesday'); break;
  // ...
  default: console.log('Invalid number');
}
</script>

Two key points:

1. Never omit break — without it, execution "falls through" to the next case
2. default is the catch-all — runs when no case matches

▶ Example: Switch Fall-through Pitfall

6. falsy Values

In conditional checks, the following values are treated as false (called falsy values):

All other values are truthy, including "0" (string zero), [] (empty array), {} (empty object) — these may look "empty," but they evaluate to true in conditions.

▶ Example: Falsy Value Checks

Related Statements：if...else switch

❓ FAQ

📖 Summary

• if...else if...else evaluates top to bottom, executing the first match and skipping the rest
• Ternary operator is shorthand for if...else — good for simple assignments, not for complex logic
• switch is cleaner for matching fixed values, but don't forget break
• Six falsy values: false, 0, "", null, undefined, NaN
• "0", [], {} are truthy — don't be fooled by their "empty" appearance
• Be careful with || for defaults when 0 and "" are valid — use ?? or explicit comparisons

📝 Exercises

1. Write a program that takes a year as input and determines if it's a leap year (divisible by 4 but not by 100, or divisible by 400)
2. Build a simple calculator: take two numbers and an operator (+, -, *, /) as input, use switch to compute the result, and handle division by zero
3. Build a BMI calculator: take height (m) and weight (kg) as input, calculate BMI, and display the category (underweight/normal/overweight/obese)

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us