JavaScript - If...Else: A Beginner's Guide

Hello there, aspiring coders! Today, we're going to dive into one of the most fundamental concepts in programming: the if...else statement. Think of it as the decision-maker in your code, like a traffic light guiding cars at an intersection. Let's get started!

Flow Chart of if-else

Before we jump into the code, let's visualize how if...else statements work. Imagine you're at a fork in the road:

        [Condition]
           /    \
          /      \
         /        \
    [True]      [False]
      |            |
   [Action 1]   [Action 2]

This simple diagram shows the essence of if...else: if a condition is true, do one thing; otherwise, do something else.

JavaScript if statement

Let's start with the basic 'if' statement. It's like saying, "If it's raining, take an umbrella."

let isRaining = true;

if (isRaining) {
    console.log("Don't forget your umbrella!");
}

In this example, if isRaining is true, the message will be printed. If it's false, nothing happens. Simple, right?

Let's try another example:

let temperature = 25;

if (temperature > 30) {
    console.log("It's hot outside!");
}

Here, the message will only appear if the temperature is above 30. In this case, it won't print anything because 25 is not greater than 30.

JavaScript if...else statement

Now, what if we want to do something when the condition is false? That's where 'else' comes in. It's like saying, "If it's raining, take an umbrella; otherwise, wear sunglasses."

let isRaining = false;

if (isRaining) {
    console.log("Don't forget your umbrella!");
} else {
    console.log("Enjoy the sunny day!");
}

In this case, since isRaining is false, the second message will be printed.

Here's another example:

let age = 15;

if (age >= 18) {
    console.log("You can vote!");
} else {
    console.log("Sorry, you're too young to vote.");
}

Since 15 is less than 18, the "Sorry, you're too young to vote" message will be displayed.

JavaScript if...else if... statement

Sometimes, life isn't just black and white. We need more options! That's where 'else if' comes in handy. It's like a multiple-choice question.

let grade = 75;

if (grade >= 90) {
    console.log("A - Excellent!");
} else if (grade >= 80) {
    console.log("B - Good job!");
} else if (grade >= 70) {
    console.log("C - Not bad!");
} else if (grade >= 60) {
    console.log("D - You need to study more.");
} else {
    console.log("F - Oh no! You failed.");
}

In this example, the grade is 75, so the output will be "C - Not bad!". The code checks each condition in order and stops when it finds a true condition.

Let's try one more:

let time = 14;

if (time < 12) {
    console.log("Good morning!");
} else if (time < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

Since the time is 14 (2 PM), the output will be "Good afternoon!".

Nested if...else statements

Sometimes, you might need to check for conditions within conditions. This is where nested if...else statements come in handy.

let isWeekend = true;
let isRaining = false;

if (isWeekend) {
    if (isRaining) {
        console.log("It's a rainy weekend. Perfect for reading a book!");
    } else {
        console.log("It's a sunny weekend. Let's go for a picnic!");
    }
} else {
    console.log("It's a weekday. Time to work!");
}

In this example, we first check if it's a weekend. If it is, we then check if it's raining to decide what activity to suggest.

Comparison Table of If...Else Methods

Here's a handy table summarizing the different if...else methods we've covered:

Method	Syntax	Use Case
if	if (condition) { ... }	When you want to execute code only if a condition is true
if...else	if (condition) { ... } else { ... }	When you want one outcome if a condition is true, and a different outcome if it's false
if...else if...else	if (condition1) { ... } else if (condition2) { ... } else { ... }	When you have multiple conditions to check
Nested if...else	if (condition1) { if (condition2) { ... } else { ... } } else { ... }	When you need to check for conditions within conditions

Remember, coding is all about practice. Don't be afraid to experiment with these concepts. Try changing the values in the examples and see how the output changes. That's the best way to learn!

In my years of teaching, I've found that students who play around with the code and make mistakes learn the fastest. So go ahead, break things, fix them, and have fun in the process!

Happy coding, future programmers!

Credits: Image by storyset