Conditionals: If-Then-Else
Learn how computers make decisions using conditions -- just like comparing numbers in Maths!
What are Conditionals?
A conditional lets a program make decisions. It checks if something is true or false, then does different things depending on the answer.
You make conditional decisions every day: "If it's raining, then take an umbrella, else wear sunglasses."
Morning Decision
If it's a weekday, then go to school.
Else sleep in!
Dinner Decision
If you're hungry, then eat dinner.
Else have a small snack later.
Flowchart: Should I Wear a Jacket?
Maths Connection: Comparisons
Conditionals use the comparison operators you already know from Maths:
Greater than
5 > 3 is true
Less than
2 < 7 is true
Equal to
4 === 4 is true
Greater or equal
5 >= 5 is true
Less or equal
3 <= 5 is true
Not equal to
3 !== 5 is true
Try It: Interactive Code Examples
Temperature Checker
let temp = 35;
if (temp > 30) {
display("It's hot! Stay hydrated.");
} else if (temp > 15) {
display("Nice weather!");
} else {
display("It's cold! Wear a jacket.");
}
Grade Calculator
let score = 75;
if (score >= 90) {
display("Grade: A - Excellent!");
} else if (score >= 75) {
display("Grade: B - Great work!");
} else if (score >= 50) {
display("Grade: C - Pass");
} else {
display("Grade: F - Keep trying!");
}
Key Vocabulary
Conditional
A statement that makes a decision based on whether a condition is true or false.
Condition
A test that evaluates to true or false. E.g., score >= 50
if
Runs code only if the condition is true.
else
Runs code when the if condition is false. The "otherwise" path.
else if
Checks an additional condition when the first if is false.
Comparison Operator
Symbols that compare values: > < === >= <= !==
Worked Examples
What does this code display when age = 16?
let age = 16;
if (age >= 18) {
display("You can vote!");
} else {
display("You cannot vote yet.");
}
Step 1: Check the condition: is 16 >= 18? No (false).
Step 2: Since the condition is false, skip the if block and run the else block.
Answer: It displays "You cannot vote yet."
What does this nested conditional display when x = 0?
let x = 0;
if (x > 0) {
display("Positive");
} else if (x < 0) {
display("Negative");
} else {
display("Zero");
}
Step 1: Is 0 > 0? No. Skip to else if.
Step 2: Is 0 < 0? No. Skip to else.
Step 3: Both conditions were false, so run the else block.
Answer: It displays "Zero"
Write a conditional to check if a number is even or odd
Think: A number is even if it divides by 2 with no remainder. In code, we use % (modulo) to check the remainder.
let number = 7;
if (number % 2 === 0) {
display(number + " is even");
} else {
display(number + " is odd");
}
Answer: 7 % 2 = 1 (remainder of 1), so it displays "7 is odd".
Knowledge Check
Select the correct answer for each question.
Question 1
What does this code display?
let temp = 22;
if (temp > 30) {
display("Hot!");
} else {
display("Not hot.");
}
Question 2
Which comparison is true?
Question 3
What grade does a score of 62 get?
if (score >= 80) { grade = "A"; }
else if (score >= 60) { grade = "B"; }
else if (score >= 40) { grade = "C"; }
else { grade = "F"; }
Question 4
What keyword do you use to check an additional condition after if?
Question 5
What does this code display when number = 10?
let number = 10;
if (number % 2 === 0) {
display("Even");
} else {
display("Odd");
}
Key Concepts Summary
- ●Conditionals let programs make decisions using
if,else if, andelse. - ●A condition is a test that is either true or false.
- ●We use comparison operators from Maths: >, <, ===, >=, <=, !==
- ●Conditions are checked from top to bottom. The first true condition runs its code block.
- ●Flowcharts use diamond shapes to represent decisions.