JavaScript If Statement: A Complete Beginner Guide

An if statement is the simplest way to make a decision in JavaScript. You give it a condition, and it runs a block of code if that condition is true. If the condition is false, it skips the block completely.

javascript

if (10 > 5) {
  console.log("Ten is larger than five.");
}
// "Ten is larger than five." prints because the condition is true

That is the core idea. The rest of this article explains the syntax in detail, what counts as a valid condition, and the mistakes beginners make most often.

The if Statement Syntax

Every if statement has three parts:

javascript

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

• if: the keyword that starts the statement.
• (condition): an expression inside parentheses. JavaScript evaluates it and converts the result to true or false.
• { ... }: the body. Code inside these curly braces runs only when the condition is true.

The condition is always wrapped in parentheses. Forgetting the parentheses is a syntax error.

What Counts as a Condition

The condition can be anything that produces a value: a comparison, a variable, a function call, or even a literal value. JavaScript converts whatever you put there to a boolean.

Comparisons (most common)

javascript

const score = 85;
 
if (score >= 80) {
  console.log("Pass");
}
// "Pass" -- 85 >= 80 is true

Comparisons return true or false directly, so they are the most natural condition.

Truthy and falsy values

When the condition is not already a boolean, JavaScript converts it. Values that convert to false are called falsy, and values that convert to true are called truthy.

There are exactly six falsy values in JavaScript:

javascript

if (false)     { } // does not run
if (0)         { } // does not run
if ("")        { } // does not run (empty string)
if (null)      { } // does not run
if (undefined) { } // does not run
if (NaN)       { } // does not run

Everything else is truthy. This surprises a lot of beginners, because some values that look empty or falsy at a glance actually count as truthy in JavaScript:

javascript

if ([])       { console.log("runs"); } // empty array is truthy
if ({})       { console.log("runs"); } // empty object is truthy
if ("false")  { console.log("runs"); } // non-empty string is truthy
if ("0")      { console.log("runs"); } // non-empty string is truthy
if (-1)       { console.log("runs"); } // non-zero number is truthy

The string "false" is truthy because it is a non-empty string. The string "0" is truthy for the same reason. Only the exact six values listed above are falsy.

This automatic conversion lets you write concise checks:

javascript

const username = "";
 
if (username) {
  console.log("Hello, " + username);
} else {
  console.log("No username provided.");
}
// "No username provided." -- empty string is falsy

For a deeper explanation, see the truthy and falsy values guide.

The if Body

The code inside curly braces is called the body. It can contain any number of statements:

javascript

if (isLoggedIn) {
  console.log("Loading dashboard...");
  fetchUserData();
  updateLastLoginTime();
}

When the body has exactly one statement, the curly braces are technically optional, and JavaScript will still run that single line correctly without them:

javascript

if (isLoggedIn) console.log("Welcome!");

This works but is not recommended. If you later add a second statement without adding braces, only the first statement is controlled by the if:

javascript

if (isLoggedIn)
  console.log("Loading...");
  fetchUserData(); // Runs ALWAYS, regardless of isLoggedIn!

Always use curly braces. It prevents bugs and makes the code's structure visible at a glance.

The Assignment-vs-Comparison Trap

The most common if statement mistake is using = (assignment) when you meant === (comparison):

javascript

// Wrong: = assigns, does not compare
if (role = "admin") {
  console.log("Access granted"); // Always runs!
}

This code does two things: it assigns "admin" to role, then evaluates "admin" as truthy. The if block always runs, and role is silently overwritten.

javascript

// Right: === compares
if (role === "admin") {
  console.log("Access granted"); // Only runs when role is "admin"
}

Some developers write comparisons with the literal value on the left instead of the variable, specifically to catch this mistake at the syntax level:

javascript

if ("admin" === role) { ... } // If you use = here, it is a syntax error

This is a style choice. The important thing is to pause whenever you see a single equals sign inside an if condition and ask yourself: "Did I mean to assign, or did I mean to compare?"

Combining Multiple Conditions

A single if can check more than one thing using logical operators:

javascript

const age = 25;
const hasLicense = true;
 
if (age >= 18 && hasLicense) {
  console.log("You can drive.");
}

AND means both conditions must be true. OR means at least one must be true. For more complex combinations, see the logical short-circuiting guide.