How to Write an If Statement in JavaScript

Use an if statement when code should run only when a condition is true. This is the core building block for validation, branching logic, permissions, feature flags, and UI state changes.

What you’ll build or solve

You’ll learn how to write an if statement in JavaScript with conditions, else, and else if. You’ll also know how to keep condition logic readable.

When this approach works best

This approach is the right choice when your code must choose between different outcomes.

Common real-world scenarios include:

• Login checks
• Empty form validation
• Pricing tier rules
• Feature access
• Theme switching

This is a bad idea when the logic maps one value to many exact cases. In that case, switch may read better.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic variables and comparison operators knowledge

Step-by-step instructions

Step 1: Write the condition inside parentheses

Start with the if keyword, then place the condition in parentheses.

const age = 20;

if (age >= 18) {
  console.log("Access granted");
}

Use else when a second outcome is needed.

if (age >= 18) {
  console.log("Access granted");
} else {
  console.log("Access denied");
}

For multiple branches, add else if.

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
}

What to look for:

• Conditions go inside parentheses
• Code runs only when the condition is true
• Use else for fallback logic
• Use else if for multiple branches
• Keep conditions simple and readable

Examples you can copy

Empty input check

if (email === "") {
  console.log("Email required");
}

Premium access

if (user.plan === "pro") {
  console.log("Premium unlocked");
}

Theme switch

if (isDarkMode) {
  document.body.classList.add("dark");
}

Common mistakes and how to fix them

Mistake 1: Using = instead of ===

What the reader might do:

if (role = "admin")

Why it breaks: this assigns a value instead of comparing it.

Corrected approach:

if (role === "admin")

Mistake 2: Forgetting braces

What the reader might do:

if (isLoggedIn)
  showDashboard();
  loadData();

Why it breaks: only the first line belongs to the if.

Corrected approach:

if (isLoggedIn) {
  showDashboard();
  loadData();
}

Mistake 3: Deep nested conditions

What the reader might do:

if (user) {
  if (user.plan) {
    if (user.plan === "pro") {
      console.log("Yes");
    }
  }
}

Why it breaks: deep nesting quickly becomes harder to read.

Corrected approach:

Flatten the logic with combined conditions.

if (user && user.plan === "pro") {
  console.log("Yes");
}

Troubleshooting

If the wrong branch runs, check === vs =.

If only one line runs, add braces.

If conditions become hard to read, split them into helper variables.

If multiple exact values are compared, consider switch.

Quick recap

• Use if for conditional logic
• Put conditions in parentheses
• Use else and else if for branches
• Use === for comparisons
• Keep conditions readable