Conditionals

Contitional Statements

Conditional statements in JavaScript are like the decision-makers of your code. They help your program figure out which actions to take based on certain conditions. Think of them as checkpoints or crossroads where your code decides which way to go.

For example, imagine you’re following a map, and at each crossroads, you have to choose which path to take based on the signs you see. Conditional statements work similarly. They look at a condition, like whether a number is greater than 10, and based on that, they decide which part of the code to run.

These decision points are often called "branches" because they split your code into different paths, depending on the outcome of the condition. If your condition is true, one path is followed; if it’s false, another path is taken. This branching allows your code to react differently under different circumstances, making it more flexible and dynamic.

In short, conditional statements are crucial for making decisions and controlling the flow of your code. They help guide your program through various possible scenarios, just like choosing a path on a map.

If

The if statement is like the gatekeeper of your code, determining which blocks of code should run based on whether certain conditions are met. It’s the most basic and commonly used conditional statement in JavaScript.

Imagine you’re hosting a party and you have a guest list. The if statement is like checking the guest list to see if someone is invited. If the condition you check (e.g., “Is this guest on the list?”) is true, you let them in (run the code inside the if block). If it’s false, they stay outside (skip that block of code).

Here's how it works: you write an if statement followed by a condition in parentheses. If the condition evaluates to true, the code inside the curly braces {} that follow the if statement runs. If it’s false, the code inside those braces is skipped.

For example:

let age = 18;

if (age >= 18) {
  console.log("You’re an adult!");
}

In this snippet, the if statement checks if age is 18 or older. Since 18 meets the condition, it prints “You’re an adult!” to the console.

The if statement is great for making decisions in your code, allowing it to respond dynamically to different situations. It’s the starting point for more complex decision-making, leading to branching paths based on various conditions.

Else

The else statement is like the trusty sidekick to the if statement, swooping in when the initial condition doesn’t hold up. Think of it as the backup plan in your code’s decision-making process.

When you use an if statement, you’re setting up a condition to check. If that condition is true, the code inside the if block runs. But what if the condition is false? That’s where the else statement comes in. It allows you to specify a block of code to execute when the if condition isn't met.

Imagine you’re at a dinner party with a dress code. You tell your guests, “If you’re wearing formal attire, you can enter. If not, you’re welcome to stay in the lounge.” The if statement checks for formal attire, and if a guest doesn’t meet the dress code, the else statement ensures they still have a place to go.

Here’s how it looks in code:

let isRaining = false;

if (isRaining) {
  console.log("Take an umbrella!");
} else {
  console.log("Enjoy the sunshine!");
}

In this example, if isRaining is true, the code prints “Take an umbrella!” If it’s false, the else block executes, and you get “Enjoy the sunshine!” instead.

The else statement makes your code more flexible by handling cases where the if condition isn’t satisfied. It’s a key part of creating robust, responsive code that adapts to different scenarios.

Else If

The else if statement is like the middle child of conditional logic, standing between the if and else statements, ready to handle more complex decision-making. When you have multiple conditions to check, else if steps in to add more options without getting tangled up in a mess of nested if statements.

Imagine you're throwing a party and you need to decide what to do based on the weather. If it's sunny, you plan an outdoor barbecue. If it’s raining, you move the party indoors. But what if it's cloudy? Well, that's where else if shines. It allows you to add this third option seamlessly.

Here's how it works in code:

let weather = "cloudy";

if (weather === "sunny") {
  console.log("Let’s have a barbecue!");
} else if (weather === "rainy") {
  console.log("Let’s move the party indoors.");
} else if (weather === "cloudy") {
  console.log("Perfect for a movie marathon!");
} else {
  console.log("Weather is unpredictable. Let’s play it by ear.");
}

In this example, the if statement checks if it's sunny. If not, the first else if checks if it's rainy. If neither condition is true, the second else if checks if it's cloudy. If none of these conditions match, the else statement handles the rest.

The else if statement lets you build more nuanced and flexible conditions, making sure that your code can handle a variety of scenarios without becoming unwieldy. It’s your go-to for layering multiple conditions and making sure every possibility is covered.

Switch

The switch statement is like having a special switchboard that lets you choose from multiple options, all in one neat package. It’s a streamlined way to handle situations where you have several possible values to check and different actions to take based on those values. Think of it as a more organized way to manage a lot of if-else if statements.

Here’s how it works: You start with the switch keyword and provide an expression you want to evaluate. Then, you list out the different cases, each one representing a possible value the expression might match. For each case, you specify the block of code that should run if there’s a match. Don’t forget the break statement at the end of each case to stop the execution from falling through to the next case. Finally, you can include a default case to handle any values that don’t match any of the specified cases.

Let’s say you’re planning what to have for dinner based on what you’re craving. Here’s how you might use a switch statement:

let craving = "pizza";

switch (craving) {
  case "pizza":
    console.log("Great choice! Let’s order a pizza.");
    break;
  case "sushi":
    console.log("Sushi sounds amazing! Time to find a good place.");
    break;
  case "burger":
    console.log("Burgers it is! Let’s fire up the grill.");
    break;
  default:
    console.log("Hmm, not sure what that is. Let’s go with something new!");
}

In this example, the switch statement looks at the craving variable and matches it against each case. If craving is "pizza", it executes the code under that case and then breaks out of the switch. If no cases match, the default block provides a fallback option.

The switch statement keeps your code clean and readable, especially when you have multiple possible values to check. It’s perfect for those scenarios where if-else if chains start to get a bit messy, helping you keep things organized and easy to follow.

Study Style Notes

If Statement

• Function: Evaluates a condition and executes a block of code if the condition is true.
• Purpose: Used for simple decision-making, where only one condition needs to be checked.

Else Statement

• Function: Provides an alternative block of code that executes when the if condition is false.
• Purpose: Handles scenarios where there are two mutually exclusive outcomes—one if the condition is true and another if it is false.

Else If Statement

• Function: Allows for the evaluation of additional conditions if the initial if condition is false.
• Purpose: Useful for handling multiple conditions in a sequential manner, enabling more complex decision-making without nesting multiple if statements.

Switch Statement

• Function: Evaluates an expression against multiple possible values and executes code corresponding to the first matching value. It can include a default case for values that do not match any of the specified cases.
• Purpose: Provides a more organized way to manage multiple potential values of an expression, making the code cleaner and more readable compared to multiple if-else if statements.

Summary

• if: Determines which block of code to execute if a specific condition is true.
• else: Provides an alternate block of code to execute if the if condition is false.
• else if: Checks additional conditions if the initial if condition is false, allowing for more complex decision structures.
• switch: Evaluates an expression against multiple values, offering a streamlined approach for handling various potential outcomes.