Courses Learn Blog Contact
Get Started →
Home  /  Free Lessons  /  JavaScript Simplified
Lesson 5

Conditional Statements

JavaScript Simplified · One concept, one day, one project · Day 5 of 32 Conditional Statements Teaching JavaScript to make decisions. You learn if, else and else if, then build a grade checker that turns a score into a l

JavaScript Simplified 4 min read Free

JavaScript Simplified · One concept, one day, one project · Day 5 of 32

Conditional Statements

Teaching JavaScript to make decisions. You learn if, else and else if, then build a grade checker that turns a score into a letter.

By the end of today you can

  • Make a program choose a path with if and else
  • Handle several cases in order with else if
  • Write a condition that reads like a clear yes/no question
  • Build a grade checker from a score

Everything so far has run straight through, top to bottom. Real programs need to choose: if the password is right, let them in, otherwise show an error. That choosing is a conditional, and it is the start of a new layer: making JavaScript think.

1. The if Statement

Definition

An if statement runs a block of code only when a condition is true. You write if, then the condition in brackets, then the code to run in curly braces.

Real-Life Scenario

At an event, security checks your name against the list. If your name is on it, you go in. If not, nothing happens at that door. The check is the condition; going in is the code that runs only when the condition is true.

What this code doesThe code inside the braces runs only because score >= 50 is true. If the score were 40, nothing would print.
app.js
1
2
3
4
5
const score = 72;

if (score >= 50) {
  console.log("You passed.");
}
OUTPUT   TERMINAL
➜ webbo3 node app.js
You passed.

2. else: the other path

else gives a second block that runs when the condition is false. One of the two always runs, never both.

What this code doesBecause the score is 40, the condition is false, so the else block runs. Exactly one of the two messages prints.
app.js
1
2
3
4
5
6
7
const score = 40;

if (score >= 50) {
  console.log("You passed.");
} else {
  console.log("You did not pass. Try again.");
}
OUTPUT   TERMINAL
➜ webbo3 node app.js
You did not pass. Try again.

3. else if: more than two cases

When there are several cases, else if lets you check them in order. JavaScript tries each condition from the top and runs the first one that is true, then stops.

What this code doesJavaScript checks top to bottom. 85 is not below 70, so the first condition (score >= 70) is true and "Grade: A" prints. The rest are skipped.
app.js
1
2
3
4
5
6
7
8
9
10
11
const score = 85;

if (score >= 70) {
  console.log("Grade: A");
} else if (score >= 60) {
  console.log("Grade: B");
} else if (score >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}
OUTPUT   TERMINAL
➜ webbo3 node app.js
Grade: A
Order matters with else if

Check the highest band first. If you checked score >= 50 before score >= 70, a score of 85 would match the 50 band first and wrongly print the lower grade. Go from the top band down.

Today’s Mini Project

🎓 Grade Checker

Turn a score into a letter grade: 70 and above is A, 60s is B, 50s is C, 40s is D, below 40 is F. This is the first time your program decides between several outcomes.

What this code doesFive bands checked from the top. A score of 64 is below 70 but at least 60, so it lands on B.
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const score = 64;

if (score >= 70) {
  console.log("Grade: A");
} else if (score >= 60) {
  console.log("Grade: B");
} else if (score >= 50) {
  console.log("Grade: C");
} else if (score >= 40) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}
OUTPUT   TERMINAL
➜ webbo3 node app.js
Grade: B
Challenge (15 minutes)

Add a line before the grade that prints "Excellent!" only when the score is 90 or above, on top of the letter grade. Expected: a 95 prints "Excellent!" and "Grade: A".

Try This

Write an if/else that checks a variable age and prints "Adult" when it is 18 or more, otherwise "Minor".

Expected: one of the two words, depending on the age you set.

Picture This

Your program is no longer a straight line. It now has forks in the road, and it chooses which way to go based on the data. That single idea, "if this, then that", is behind every app you have ever used.

Checkpoint

When does the code inside an if block run?

Only when the condition in its brackets is true. If the condition is false, that block is skipped.

What does else do?

It gives a block that runs when the if condition is false. With if and else, exactly one of the two blocks always runs.

Why check the highest grade band first in an else if chain?

Because JavaScript runs the first true condition and stops. If a lower band is checked first, a high score matches it wrongly. Checking from the top down avoids that.

Tick Before You Move On

  • ☐ I can run code only when a condition is true, with if
  • ☐ I can give an alternative with else
  • ☐ I can handle several cases in order with else if
  • ☐ I built the Grade Checker

Quick Recap

A conditional lets a program choose which code to run. if runs a block when its condition is true; else runs when it is false. else if checks several cases in order and runs the first true one. Order matters: check the strictest or highest case first.

Next: Day 6. Real decisions often depend on more than one thing at once. Tomorrow you combine conditions to ask richer questions.

Learn this with a real instructor

Free lessons take you a long way on your own. The full programmes add live classes, assignments, Skill Points and a certificate — built for African students.