JavaScript If Statement: A Complete Beginner Guide

Every program needs to make decisions. Should the form submit or show an error? Should the user see the dashboard or the login page? Should the discount apply or not? In JavaScript, the if statement is the fundamental tool for answering these questions. It evaluates a condition, and if that condition is true, it runs a block of code.

Think of an if statement like a security checkpoint at an airport. The guard checks your boarding pass (the condition). If the pass is valid (true), you walk through to the gate (the code block runs). If the pass is invalid (false), you are turned away (the code block is skipped). The guard does not care about your luggage, your outfit, or your destination. It checks one thing: is the boarding pass valid?

This tutorial teaches you everything about the JavaScript if statement: the syntax, how JavaScript decides what counts as true or false, practical patterns you will use in real projects, and the mistakes that trip up beginners.

Basic If Statement Syntax

The if statement has a straightforward structure:

javascript

if (condition) {
  // This code runs only when condition is true
}

The parentheses around the condition are required. The curly braces define the code block that runs when the condition evaluates to true:

javascript

const temperature = 35;
 
if (temperature > 30) {
  console.log("It is hot outside. Stay hydrated.");
}
// Output: "It is hot outside. Stay hydrated."
 
const score = 45;
 
if (score >= 50) {
  console.log("You passed the exam.");
}
// No output (45 is not >= 50, so the block is skipped)

You can put any expression inside the parentheses. JavaScript evaluates it and converts the result to a boolean (true or false). If the result is true, the code block executes. If false, JavaScript skips the block entirely and moves to the next line after the closing brace.

How JavaScript Evaluates Conditions

The condition inside an if statement does not need to be an explicit true or false. JavaScript uses comparison and logical operators to produce boolean results:

javascript

const age = 21;
const hasLicense = true;
const balance = 0;
 
// Comparison operators produce booleans
if (age >= 18) {
  console.log("Adult"); // Runs (21 >= 18 is true)
}
 
// Variables that are already booleans work directly
if (hasLicense) {
  console.log("Can drive"); // Runs (hasLicense is true)
}
 
// Be careful: 0 is falsy
if (balance) {
  console.log("Has funds"); // Does NOT run (0 is falsy)
}

Truthy and Falsy Values

JavaScript has a concept called "truthiness." When a non-boolean value appears in a condition, JavaScript converts it to true or false using specific rules. Understanding these rules is critical for writing correct conditions.

There are exactly seven falsy values in JavaScript. Everything else is truthy:

Everything else is truthy, including values that surprise beginners:

javascript

// These are all TRUTHY (the if block runs)
if ("hello") { }     // Non-empty string
if (42) { }          // Non-zero number
if (-1) { }          // Negative numbers are truthy
if ([]) { }          // Empty array is truthy!
if ({}) { }          // Empty object is truthy!
if ("0") { }         // String "0" is truthy (it is not empty)
if ("false") { }     // String "false" is truthy (it is not empty)
 
// These are all FALSY (the if block is skipped)
if (0) { }           // Zero
if ("") { }          // Empty string
if (null) { }        // Null
if (undefined) { }   // Undefined
if (NaN) { }         // Not a Number

Practical If Statement Patterns

Validating User Input

javascript

function validateEmail(email) {
  if (typeof email !== "string") {
    console.log("Email must be a string");
    return false;
  }
 
  if (email.length === 0) {
    console.log("Email cannot be empty");
    return false;
  }
 
  if (!email.includes("@")) {
    console.log("Email must contain an @ symbol");
    return false;
  }
 
  if (!email.includes(".")) {
    console.log("Email must contain a domain");
    return false;
  }
 
  return true;
}
 
validateEmail("");           // "Email cannot be empty" → false
validateEmail("hello");      // "Email must contain an @ symbol" → false
validateEmail("ada@dev.io"); // → true

Checking Multiple Conditions

Use logical operators (&&, ||, !) to combine conditions:

javascript

const user = {
  age: 25,
  hasAccount: true,
  isVerified: true,
  country: "US",
};
 
// AND (&&): all conditions must be true
if (user.age >= 18 && user.hasAccount && user.isVerified) {
  console.log("Full access granted");
}
 
// OR (||): at least one condition must be true
if (user.country === "US" || user.country === "CA") {
  console.log("North American user");
}
 
// NOT (!): inverts the condition
if (!user.isVerified) {
  console.log("Please verify your email");
}
 
// Combined: age check AND (US or CA)
if (user.age >= 21 && (user.country === "US" || user.country === "CA")) {
  console.log("Eligible for this service");
}

Guard Clauses for Early Returns

Guard clauses check for invalid conditions at the top of a function and return early, keeping the main logic un-nested and easy to read:

javascript

function processPayment(order) {
  if (!order) {
    return { error: "No order provided" };
  }
 
  if (order.total <= 0) {
    return { error: "Order total must be positive" };
  }
 
  if (!order.paymentMethod) {
    return { error: "No payment method selected" };
  }
 
  if (order.total > 10000) {
    return { error: "Orders over $10,000 require manual review" };
  }
 
  // Main logic runs only when all guards pass
  const tax = order.total * 0.08;
  const finalTotal = order.total + tax;
 
  return {
    success: true,
    total: finalTotal,
    tax: tax,
  };
}

Single-Line If Statements

JavaScript allows you to omit the curly braces for single-statement if blocks:

javascript

const age = 20;
 
// Without braces (single statement)
if (age >= 18) console.log("Adult");
 
// With braces (always recommended)
if (age >= 18) {
  console.log("Adult");
}

Using typeof in If Conditions

The typeof operator is commonly paired with if statements to check value types before operating on them:

javascript

function formatValue(input) {
  if (typeof input === "string") {
    return input.toUpperCase();
  }
 
  if (typeof input === "number") {
    return input.toFixed(2);
  }
 
  if (typeof input === "boolean") {
    return input ? "Yes" : "No";
  }
 
  return String(input);
}
 
console.log(formatValue("hello"));  // "HELLO"
console.log(formatValue(3.14159));  // "3.14"
console.log(formatValue(true));     // "Yes"

Nested If Statements

You can place if statements inside other if statements. Use this sparingly; deep nesting makes code hard to read:

javascript

function checkEligibility(user) {
  if (user.age >= 18) {
    if (user.hasValidId) {
      if (user.creditScore >= 650) {
        return "Approved";
      }
      return "Denied: credit score too low";
    }
    return "Denied: valid ID required";
  }
  return "Denied: must be 18 or older";
}

The nested version above works, but guard clauses produce cleaner code:

javascript

function checkEligibility(user) {
  if (user.age < 18) {
    return "Denied: must be 18 or older";
  }
 
  if (!user.hasValidId) {
    return "Denied: valid ID required";
  }
 
  if (user.creditScore < 650) {
    return "Denied: credit score too low";
  }
 
  return "Approved";
}

Both functions produce identical results, but the flat structure is easier to read, test, and extend.

Best Practices

Always use curly braces. Even for single-line blocks. It prevents bugs when code is modified later and keeps the style consistent across your codebase.

Use strict equality (===) in conditions. The === operator compares both value and type without coercion. Using == can produce unexpected results, like 0 == "" being true. Strict equality eliminates that ambiguity.

Prefer guard clauses over deep nesting. Check for failure conditions early and return. The main logic stays at the top level of the function, making it easier to follow.

Keep conditions simple and readable. If a condition has more than three parts, extract it into a named variable: const isEligible = age >= 18 && hasAccount && isVerified; then use if (isEligible).

Do not compare booleans to true or false. Write if (isActive) instead of if (isActive === true). The extra comparison adds noise without adding clarity.

Common Mistakes and How to Avoid Them

Using = instead of === in conditions. Writing if (x = 5) assigns 5 to x and always evaluates as truthy. Use === for comparison: if (x === 5). ESLint's no-cond-assign rule catches this automatically.

Assuming empty arrays are falsy. if ([]) evaluates to true because arrays are objects, and all objects are truthy. Check array.length > 0 to test if an array has elements.

Forgetting that 0 and empty string are falsy. Code like if (userAge) fails when userAge is 0 (a valid age for some calculations). Be explicit: if (userAge !== undefined && userAge !== null) or use the nullish coalescing pattern.

Checking for null without checking for undefined. In many cases, both null and undefined represent "no value." Use if (value == null) (one of the rare valid uses of loose equality) to catch both, or use if (value === null || value === undefined) for explicit checks.

Writing overly complex conditions. A condition like if (a > b && (c || d) && !(e && f)) is hard to debug. Break it into named booleans: const meetsAge = a > b; and const hasPermission = c || d; then combine: if (meetsAge && hasPermission && !isBlocked).

Next Steps