Loading...

JavaScript If Else

Logical operators gave you a yes/no answer. This lesson asks the next question: which lines should run? When the answer is yes, run one block. When it is no, run another. That choice is if / else / else if. You already know how to build a boolean; here you use it to pick a path.

What does if do?

if looks at a condition in parentheses. If that value is truthy, JavaScript runs the block in curly braces right after it. If the value is falsy, that block is skipped. else is the backup path for when the if failed. else if adds another check before you fall through to a final else.

The keywords at a glance

📊 Everyday if / else pieces

Keyword Everyday reading Typical use
if if this passes, run this block first check
else if else, if this other check passes… middle paths
else otherwise, run this final fallback

Keep the condition honest: a comparison (age >= 18), a logical join (age >= 18 && score >= 60), or a clear boolean variable. Then put the work of that path inside { … }.

Simple if

javascript 
let age = 20;
if (age >= 18) {
console.log("adult");
}
console.log("done");

if runs only when the check passes

Here age is 20, so age >= 18 is true and the Console prints adult, then done. Change age to 16 and only done remains — the if block was skipped.

The line after the closing } always runs (unless you leave the function later). if does not stop the whole program; it only decides whether its own block runs.

if with else

javascript 
let age = 16;
if (age >= 18) {
console.log("adult");
} else {
console.log("under 18");
}

else covers the other path

Now the check fails, so JavaScript skips the first block and runs else. You see under 18. Exactly one of the two branches runs — never both, never neither, for a plain if / else pair.

else if chain

javascript 
let score = 75;
if (score >= 90) {
console.log("A");
} else if (score >= 60) {
console.log("pass");
} else {
console.log("retry");
}

else if adds middle paths

score is 75. The first check (>= 90) fails. The second (>= 60) passes, so you see pass and the final else is skipped. Order matters: put the stricter checks first when bands overlap.

If you wrote three separate if statements instead, more than one block could run. else if keeps the paths exclusive — after one match, the chain stops.

Condition from compare and logic

javascript 
let age = 20;
let score = 75;
if (age >= 18 && score >= 60) {
console.log("allowed");
} else {
console.log("blocked");
}
let ready = false;
if (!ready) {
console.log("wait");
}

Put real checks in the parentheses

The condition can be a comparison, a logical expression, or a flipped boolean. age >= 18 && score >= 60 is true, so you see allowed. !ready is true, so you also see wait. Build the yes/no first; then let if choose the branch.

Store a branch message

javascript 
let age = 20;
let label;
if (age >= 18) {
label = "adult";
} else {
label = "under 18";
}
console.log(label);

Name the result of the branch

Sometimes you want a string (or number) from the choice, not only a console.log. Set label inside each branch, then use it once afterward. Here label becomes "adult".

Show the chosen path on the page

Compute a short message with if / else, then write it into the page.

Page branch with if else

html 
<!DOCTYPE html>
<html>
<head>
<title>If else — page branch</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 20;
let msg;
if (age >= 18) {
msg = "adult";
} else {
msg = "under 18";
}
let box = document.getElementById("out");
box.textContent = "status=" + msg;
</script>
</body>
</html>

age is 20, so the page shows status=adult. Set age to 16, refresh, and you should see status=under 18. The next lesson (switch) is another way to pick among many fixed values; if / else stays the everyday tool for true/false gates.

Try it yourself

  1. Log "ok" inside if (true) and confirm it prints.
  2. Use if / else with let age = 16 and print "adult" or "under 18".
  3. Build an else if chain for score bands: A (≥ 90), pass (≥ 60), else retry.
  4. Combine age >= 18 && score >= 60 in one if condition.
  5. Store a label string from if / else, then log it once.
  6. In the HTML demo, change only age, refresh, and read the new status= text.

Common mistakes

  • Forgetting curly braces { } around the branch body
  • Writing if (age = 18) with one = (assignment) instead of a comparison
  • Putting else without a matching if above it
  • Using many separate ifs when you meant exclusive else if paths
  • Checking loose bands in the wrong order (e.g. >= 60 before >= 90)

Summary

  • if runs a block when the condition is truthy
  • else runs when that if failed
  • else if adds more exclusive middle paths
  • Conditions are usually comparisons or logical expressions
  • Keep each branch inside braces; store a label when you need the result later
  • Next: switch — picking among several fixed values

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 21 of 22
Javascript Tutorial