JavaScript If Else Statements Explained for Beginners

If you've searched for "javascript if else for beginners," here's the short answer: an if/else statement lets your code make a decision. It checks whether something is true, and runs one block of code if it is, or a different block if it isn't. That's it. In this guide you'll learn exactly how to write if, else, and else if statements in JavaScript, with small, copy-pasteable examples explained line by line.

What Is a "Condition" in JavaScript?

A condition is a question that JavaScript can answer with true or false. You write conditions using comparison operators, like checking if one number is bigger than another, or if two values are equal. JavaScript looks at the condition, decides if it's true or false, and then runs the matching block of code.

let age = 20;

console.log(age > 18);
console.log(age === 20);
console.log(age === 21);

Line 1 creates a variable called age and sets it to 20. Line 3 asks "is age greater than 18?" and prints true, because 20 is bigger than 18. Line 4 asks "is age exactly equal to 20?" and prints true. Line 5 asks "is age exactly equal to 21?" and prints false, since age is 20, not 21. Each of these lines produces a true or false value, and that value is what an if statement checks.

The Basic if Statement

An if statement runs a block of code only when its condition is true. If the condition is false, JavaScript simply skips that block and moves on.

let age = 20;

if (age >= 18) {
  console.log("You can vote.");
}

Line 3 starts the if statement. The condition, age >= 18, is written inside the parentheses. Because age is 20, this condition is true, so the code between the curly braces { } on line 4 runs, printing "You can vote." If age were 15 instead, the condition would be false and nothing would print at all, because there's no else to catch that case yet.

Adding else to Handle the Opposite Case

Most of the time you want something to happen even when the condition is false. That's what else is for. It runs a block of code only when the if condition did not match.

let age = 15;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are too young to vote.");
}

Line 3 checks the same condition as before, but now age is 15, so age >= 18 is false. JavaScript skips the if block and jumps straight to the else block on line 5, which prints "You are too young to vote." Notice that only one of the two messages ever prints, never both.

Checking Multiple Conditions with else if

Sometimes two outcomes aren't enough. When you need to check several conditions in order, add one or more else if blocks between if and else. JavaScript checks each condition from top to bottom and runs the first one that's true, then stops.

let score = 72;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

JavaScript checks line 3 first: is score >= 90? No, 72 is not. It moves to line 5: is score >= 80? No. It moves to line 7: is score >= 70? Yes, 72 is at least 70, so it prints "Grade: C" and stops checking the rest, skipping line 9 entirely. Order matters here: if you had written score >= 70 first, every score of 70 or higher would stop there and never reach the A or B checks.

Comparison and Logical Operators You'll Use in Conditions

These are the building blocks you'll use inside almost every condition you write.

Use === instead of == in JavaScript. The triple-equals checks that both the value and the type match, which avoids confusing bugs where, for example, the text "20" and the number 20 would otherwise be treated as equal.

Combining Conditions with && and ||

Real decisions often depend on more than one thing. You can combine conditions using && (AND) and || (OR) instead of writing nested if statements.

let age = 25;
 let hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Welcome, you can enter.");
} else {
  console.log("Entry denied.");
}

Line 4 uses && between two conditions: age >= 18 and hasTicket. With &&, both conditions must be true for the whole thing to be true. Here age is 25 (true) and hasTicket is true, so the combined condition is true and "Welcome, you can enter." prints. If hasTicket were false, the combined condition would be false even though the age check passed, and the else block would run instead.

The Ternary Operator: A Shortcut for Simple if/else

When your if/else only sets a value or picks between two short results, the ternary operator (? and :) lets you write it in one line. It's optional, but you'll see it often in other people's code.

let age = 20;

let message = age >= 18 ? "Adult" : "Minor";
console.log(message);

Line 3 reads as: "if age >= 18 is true, use the value before the colon (\"Adult\"); otherwise, use the value after the colon (\"Minor\")." The result is stored in the variable message. This line does exactly the same job as a four-line if/else block, just written more compactly.

A Real Example: Validating a Login Form

Here's how if/else looks in a task you'll actually write: checking a username and password before letting someone log in.

let username = "alex";
let password = "hunter2";

if (username === "" || password === "") {
  console.log("Please fill in both fields.");
} else if (password.length < 8) {
  console.log("Password must be at least 8 characters.");
} else {
  console.log("Login successful!");
}

Line 4 checks if either field is empty using ||, so a missing username OR a missing password both trigger the same warning. If both fields have something in them, line 6 checks password.length, which counts the characters in the password string; here "hunter2" has 7 characters, so this condition is true and the warning about the 8-character minimum prints. Only if neither earlier condition matched would the code reach the final else and print "Login successful!".

Common Mistakes Beginners Make

• Using = instead of === — a single equals sign assigns a value, it doesn't compare one. if (age = 18) is a bug, not a check.
• Forgetting the curly braces { } on multi-line blocks, which can make later lines run unconditionally by accident.
• Writing conditions in the wrong order in an else if chain, so a broad condition catches cases meant for a more specific one below it.
• Comparing strings and numbers without converting them first, like comparing the text "20" from a form input to the number 18.
• Nesting too many if statements inside each other instead of combining conditions with && and ||, which makes code hard to read.