JavaScript Conditional Statements: If, Else, Switch Complete Guide

Conditional statements in JavaScript are like decision-makers in real life. Just like you decide whether to carry an umbrella depending on the weather, your program uses conditionals to decide which block of code should run. Without them, your code would follow a straight path with no ability to react to changing situations. In this guide, we’ll explore if, else, and switch statements step by step, with practical examples.

Table of Contents

1. Getting Started with If Statements
2. Adding Else and Else If
3. Mastering Switch Statements
4. Common Issues & Solutions
5. Best Practices

Getting Started with If Statements

The if statement checks a condition. If it’s true, the code inside runs. If not, JavaScript skips it.

Essential Concepts

• if is the simplest conditional.
• Conditions are usually expressions that evaluate to true or false.
• Curly braces {} wrap the block of code that executes if the condition is true.

Basic Usage

let age = 20;


if (age >= 18) {
console.log("You are an adult.");
}

Here, the condition checks if age is 18 or more. Since it is, the message prints.

Your First Working Example

let isRaining = true;


if (isRaining) {
console.log("Take an umbrella!");
}

This example reacts to a situation—just like you would in real life.

Adding Else and Else If

Sometimes you need an alternative path when the condition is false. That’s where else comes in.

Using Else

let score = 40;


if (score >= 50) {
console.log("You passed the test!");
} else {
console.log("You failed. Try again!");
}

If the first block doesn’t run, the else block executes instead.

Adding Else If

else if lets you check multiple conditions in sequence.

let temperature = 25;


if (temperature < 0) {
console.log("Freezing weather!");
} else if (temperature < 20) {
console.log("Cold weather!");
} else if (temperature < 30) {
console.log("Pleasant weather!");
} else {
console.log("Hot weather!");
}

Each condition is checked in order until one matches.

Mastering Switch Statements

Switch statements are perfect when one variable could have many values. Instead of long else if chains, use switch for cleaner code.

Syntax

switch (expression) {
case value1:
// Code runs if expression === value1
break;
case value2:
// Code runs if expression === value2
break;
default:
// Runs if no case matches
}

Practical Example

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("Unknown day");
}

This is easier to read than multiple else if checks.

When to Prefer Switch

let fruit = "apple";


switch (fruit) {
case "apple":
console.log("Apple chosen");
case "banana":
console.log("Banana chosen");
}

• Use switch when comparing one variable to multiple fixed values.
• Use if-else for ranges or more complex logic.

Common Issues & Solutions

Forgetting Break in Switch

If you don’t use break, execution “falls through” to the next case.

let fruit = "apple";


switch (fruit) {
case "apple":
console.log("Apple chosen");
case "banana":
console.log("Banana chosen");
}

This prints both lines because there’s no break. Always include it unless fall-through is intentional.

Overusing Else-If

Too many else if statements make code hard to read. Consider switch or refactoring into functions.

Best Practices

Keep Conditions Simple

Complex expressions inside if reduce readability. Break them into smaller checks if needed.

Use Switch for Clarity

When you have many discrete values, switch improves structure.

Default Cases

Always include a default in switch and an else in if-chains to cover unexpected inputs.

Readability Over Clever Tricks

Sometimes developers overuse shorthand like the ternary operator. Use it only when it improves clarity.

That’s it! With if, else, and switch, you now have the tools to make your JavaScript programs react dynamically—just like real-world decisions.