javascript-course-chapter-11
Chapter 11: Conditional Logic
Learn how JavaScript makes decisions using if, else, else if, switch, truthy and falsy values, guard clauses, and decision trees.
Goal: Understand how to make JavaScript choose different actions based on different conditions.
11.1 if
The if statement lets JavaScript run code only when a condition is true.
A condition is an expression that gives a Boolean result: true or false.
If the condition is true, the code inside the curly braces runs.
If the condition is false, JavaScript skips that block.
This is one of the most important ideas in programming.
You use if for login checks, scores, forms, games, permissions, and many real app decisions.
Example: Check age
// Store the user's age.
let age = 18;
// The if statement checks if age is 18 or more.
if (age >= 18) {
// This line runs only if the condition is true.
console.log("You are an adult.");
}
// Output:
// You are an adult.
Code Explanation:
The condition age >= 18 is true because age is 18.
JavaScript enters the if block and prints the message.
If age was less than 18, nothing would print.
11.2 else
The else statement gives JavaScript another path when the if condition is false.
It means “if the first condition is not true, do this instead.”
This is useful when there are only two possible outcomes.
For example, pass or fail, login or not login, open or closed, adult or child.
The else block does not need its own condition.
It automatically runs only when the if condition fails.
Example: Pass or fail
// Store the student's mark.
let mark = 45;
// Check if the student passed.
if (mark >= 50) {
console.log("Pass");
} else {
// This runs when mark is less than 50.
console.log("Fail");
}
// Output:
// Fail
Code Explanation:
The mark is 45, so mark >= 50 is false.
JavaScript skips the if block and runs the else block.
That is why the output is Fail.
11.3 else if
The else if statement lets you check more than one condition.
JavaScript checks the first if condition first.
If it is false, JavaScript moves to the next else if.
It keeps checking until one condition is true.
If no condition is true, the final else can run.
This is useful for grades, temperature ranges, user levels, and menu choices.
Example: Grade checker
// Store the student's score.
let score = 82;
// Check score ranges.
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("Needs practice");
}
// Output:
// Grade B
Code Explanation:
The score is not 90 or more, so the first condition is false.
The score is 80 or more, so the second condition is true.
JavaScript prints Grade B and stops checking the rest.
11.4 switch
The switch statement checks one value against many possible cases.
It can be cleaner than many else if statements when comparing exact values.
Each case represents one possible match.
The break keyword stops JavaScript from continuing into the next case.
The default case runs when no case matches.
Switch is useful for menus, commands, days of the week, and user choices.
Example: Choose a day
// Store a day number.
let day = 3;
// Check the day value.
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Unknown day");
}
// Output:
// Wednesday
Code Explanation:
The value of day is 3.
JavaScript finds case 3 and prints Wednesday.
The break stops the switch after the match.
11.5 Nested Conditions
Nested conditions are conditions inside other conditions.
They are useful when one decision depends on another decision.
For example, first check if a user is logged in, then check if the user is an admin.
Nested conditions can make logic more detailed.
But too much nesting can make code harder to read.
Beginners should use nested conditions carefully and keep the code clean.
Example: Login and admin check
// Store user status.
let isLoggedIn = true;
let isAdmin = false;
// First check if the user is logged in.
if (isLoggedIn) {
// This condition is inside the first condition.
if (isAdmin) {
console.log("Welcome admin.");
} else {
console.log("Welcome user.");
}
} else {
console.log("Please log in.");
}
// Output:
// Welcome user.
Code Explanation:
The user is logged in, so JavaScript enters the first if block.
Inside that block, it checks if the user is admin.
Since isAdmin is false, it prints Welcome user.
11.6 Logical Expressions
Logical expressions combine conditions using operators like &&, ||, and !.
The AND operator && requires both sides to be true.
The OR operator || requires at least one side to be true.
The NOT operator ! reverses true to false or false to true.
Logical expressions reduce the need for too many nested conditions.
They are common in login systems, forms, filters, and permission checks.
Example: Check username and password
// Store login values.
let username = "admin";
let password = "1234";
// Both conditions must be true.
if (username === "admin" && password === "1234") {
console.log("Login successful");
} else {
console.log("Wrong username or password");
}
// Output:
// Login successful
Code Explanation:
The username matches admin and the password matches 1234.
Because both sides are true, the AND expression is true.
JavaScript prints Login successful.
11.7 Truthy Values
A truthy value is a value that JavaScript treats like true in a condition.
It does not have to be the Boolean value true.
Most normal values are truthy, such as non-empty strings, numbers except 0, arrays, and objects.
Truthy values are useful because JavaScript can check if something exists.
For example, a non-empty username can be treated as true.
Beginners should understand truthy values because they appear often in conditions.
Example: Non-empty string is truthy
// Store a non-empty string.
let name = "Sara";
// JavaScript treats this as true.
if (name) {
console.log("Name exists");
} else {
console.log("Name is missing");
}
// Output:
// Name exists
Code Explanation:
The string "Sara" has text inside it.
JavaScript treats non-empty strings as truthy.
So the if block runs and prints Name exists.
11.8 Falsy Values
A falsy value is a value that JavaScript treats like false in a condition.
The main falsy values are false, 0, "", null, undefined, and NaN.
Falsy values are important when checking empty input or missing data.
For example, an empty string can mean the user did not type anything.
JavaScript automatically converts these values to false in conditions.
Beginners should memorize the common falsy values.
Example: Empty string is falsy
// Store an empty string.
let email = "";
// JavaScript treats empty string as false.
if (email) {
console.log("Email entered");
} else {
console.log("Email is required");
}
// Output:
// Email is required
Code Explanation:
The email variable has no text inside it.
An empty string is falsy.
So JavaScript runs the else block.
11.9 Guard Clauses
A guard clause is an early condition that stops a function when something is wrong.
It helps avoid deep nested conditions.
Guard clauses make code easier to read because bad cases are handled first.
For example, check if a username is missing before continuing.
If the data is invalid, return early.
This style is very common in clean JavaScript code.
Example: Stop when name is missing
// Create a function that greets a user.
function greetUser(name) {
// Guard clause: stop early if name is missing.
if (!name) {
console.log("Name is required.");
return;
}
// This runs only when name exists.
console.log("Hello, " + name + "!");
}
// Call the function with empty text.
greetUser("");
// Output:
// Name is required.
Code Explanation:
The empty string is falsy, so !name becomes true.
The function prints the error message and returns early.
This prevents the rest of the function from running.
11.10 Decision Trees
A decision tree is a structured way to make multiple decisions step by step.
Each condition leads to another possible path.
Decision trees are useful when a program has many possible outcomes.
For example, an app can decide what message to show based on age, membership, or score.
You can build decision trees with if, else if, nested conditions, or switch.
Beginners should plan decision trees carefully before writing code.
Example: Course level decision
// Store student score.
let score = 65;
// Decide the learning level.
if (score >= 90) {
console.log("Advanced level");
} else if (score >= 70) {
console.log("Intermediate level");
} else if (score >= 50) {
console.log("Beginner level");
} else {
console.log("Needs basic practice");
}
// Output:
// Beginner level
Code Explanation:
JavaScript checks each condition from top to bottom.
The score is not 90 or 70, but it is 50 or more.
So JavaScript prints Beginner level.
Chapter 11 Summary
if runs code when a condition is true.else runs code when the if condition is false.else if checks multiple conditions.switch checks one value against many cases.- Nested conditions place one condition inside another.
- Logical expressions combine conditions with AND, OR, and NOT.
- Truthy values behave like true in conditions.
- Falsy values behave like false in conditions.
- Guard clauses stop code early when something is wrong.
- Decision trees organize complex choices step by step.
