What are JavaScript conditional statements?

JavaScript Conditional Statements

Conditional statements in JavaScript are used to make decisions based on different conditions. They allow your code to execute different actions or blocks of code depending on whether a specific condition is true or false.

JavaScript provides several types of conditional statements, including if...else, switch, and the ternary operator. These statements help you control the flow of your program and make it more dynamic and responsive to user input or other factors.

if...else Statement

The if...else statement is the most basic conditional statement in JavaScript. It allows you to execute a block of code if a certain condition is true, and an optional alternative block if the condition is false.

Here's an example:

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

In this example, if the age variable is greater than or equal to 18, the program will log "You are an adult." to the console. Otherwise, it will log "You are a minor."

You can also chain multiple if...else statements together to create more complex conditional logic:

let temperature = 20;

if (temperature < 0) {
  console.log("It's freezing outside!");
} else if (temperature < 10) {
  console.log("It's cold outside.");
} else if (temperature < 20) {
  console.log("It's cool outside.");
} else {
  console.log("It's warm outside.");
}

switch Statement

The switch statement is used to perform different actions based on different conditions. It's particularly useful when you have multiple conditions to check, as it can be more concise than a long chain of if...else statements.

Here's an example:

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}

In this example, the program will log "Wednesday" to the console because the day variable is set to 3.

The break statement is used to exit the switch statement once a matching case is found. The default case is executed if none of the other cases match.

Ternary Operator

The ternary operator, also known as the conditional (or "Elvis") operator, is a shorthand way of writing an if...else statement. It takes the form condition ? valueIfTrue : valueIfFalse.

Here's an example:

let age = 18;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // Output: "Yes"

In this example, the ternary operator checks if the age variable is greater than or equal to 18. If it is, the canVote variable is assigned the value "Yes"; otherwise, it's assigned the value "No".

The ternary operator is often used for simple, one-line conditional statements, as it can make your code more concise and readable.

Visualizing Conditional Statements with Mermaid

Here's a Mermaid diagram that illustrates the flow of an if...else statement:

This diagram shows that the program first checks the condition. If the condition is true, it executes the code block associated with the if statement. If the condition is false, it executes the code block associated with the else statement.

By using Mermaid diagrams, you can help your students visualize the flow of control in conditional statements, making it easier for them to understand the underlying logic.