Making Decisions in Your Code
Introduction
Hello, young web developers! 👋 Welcome to our lesson on conditional statements in JavaScript! Just like making decisions in real life, conditional statements help our programs decide what action to take based on certain conditions. Imagine you have a treasure map, and you can only enter the treasure cave if you have the key. Similarly, conditional statements allow your code to choose different paths.
Today, we'll explore three key ways to control the flow of our JavaScript programs: if, else, and switch statements. Let's dive in!
Step-by-Step Explanations
1. The if Statement
The if statement evaluates a condition (a statement that can be true or false). If the condition is true, the code inside the if block runs. If not, the code inside the if block is skipped.
Syntax:
if (condition) {
// Code to execute if condition is true
}Example:
let age = 16;
if (age >= 18) {
console.log("You can vote! 🎉");
}In this example, we check if age is greater than or equal to 18. Since 16 is not, nothing happens.
2. The else Statement
The else statement works with an if statement. It allows you to specify a block of code that will run if the if condition is false.
Syntax:
if (condition) {
// Code to execute if condition is true
} else {
// Code to execute if condition is false
}Example:
let age = 16;
if (age >= 18) {
console.log("You can vote! 🎉");
} else {
console.log("Sorry, you are too young to vote. 😔");
}Now, because age is 16, the output will be: "Sorry, you are too young to vote. 😔"
3. The else if Statement
Sometimes we have multiple conditions to check. For this, we can use else if.
Syntax:
if (condition1) {
// Code if condition1 is true
} else if (condition2) {
// Code if condition2 is true
} else {
// Code if none of the above conditions are true
}Example:
let score = 85;
if (score >= 90) {
console.log("You got an A! 🥳");
} else if (score >= 80) {
console.log("You got a B! 🙂");
} else {
console.log("Keep trying! 💪");
}In this case, the output will be: "You got a B! 🙂" since the score is 85.
4. The switch Statement
A switch statement is a great way to make decisions when you're checking the same variable against different values.
Syntax:
switch (expression) {
case value1:
// Code to execute if expression matches value1
break;
case value2:
// Code to execute if expression matches value2
break;
default:
// Code to execute if none of the cases match
}Example:
let fruit = "apple";
switch (fruit) {
case "banana":
console.log("You chose a banana! 🍌");
break;
case "apple":
console.log("You chose an apple! 🍏");
break;
case "orange":
console.log("You chose an orange! 🍊");
break;
default:
console.log("Unknown fruit.");
}Here, the output will be: "You chose an apple! 🍏" because fruit is set to "apple".
Exercise/Project Idea 💡
Create a Simple Quiz
Now it's time to put what you've learned into practice! Let's create a simple quiz that asks the user a math question.
Task:
- Use an
if,else if, andelsestatement to check the user's answer. - Use
promptto ask, "What is 5 + 3?" - If the user answers correctly (8), print "Correct! ".
- If the answer is not a number, print "Please enter a valid number!".
- If the answer is incorrect, print "Oops! The correct answer is 8.".
Feel free to use a switch statement instead of if statements if you prefer!
RECAP
Great job today! You've learned how to use conditional statements to make decisions in your JavaScript programs. We covered:
- The
ifstatement to evaluate a condition. - The
elsestatement to provide an alternative action. - The
else ifstatement to check multiple conditions. - The
switchstatement to make decisions based on the value of a single variable.
Conditional statements are essential for creating programs that can respond to different situations. Keep practicing, and soon you'll be making even more complex applications!
Happy coding!