JavaScript Conditionals: If, Else & Switch

At its core, programming is about making decisions. **Control Flow** is the order in which the computer executes statements in a script. By default, code runs from top to bottom. However, JavaScript provides powerful tools called **conditional statements** that allow you to disrupt this flow, execute different blocks of code based on specific conditions, and create dynamic, responsive applications.

Mastering these tools is the difference between a static page and a fully interactive web application.

1. The `if` Statement: The Foundational Decision

The `if` statement is the simplest conditional. It executes a block of code **only if** a specified condition evaluates to `true`.

let temperature = 30;

if (temperature > 25) {
  console.log("It's a hot day!");
}
// Output: It's a hot day!

If `temperature` was 20, the condition `(20 > 25)` would be `false`, and the code inside the `` block would be skipped entirely.

2. The `if...else` Statement: The "Otherwise" Path

An `if` statement is often paired with an `else` statement to provide a fallback. If the `if` condition is `false`, the `else` block is executed. This handles the "otherwise" scenario.

let isLoggedIn = false;

if (isLoggedIn === true) {
  console.log("Welcome back, user!");
} else {
  console.log("Please log in.");
}
// Output: Please log in.

3. The `if...else if...else` Ladder

When you have more than two possibilities, you can chain multiple conditions together using `else if`. JavaScript will check each condition from top to bottom and execute the *first* block that evaluates to `true`. If none are true, the final `else` block runs.

let score = 85;

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("Grade: F");
}
// Output: Grade: B

4. The `switch` Statement: The Clean Alternative

When you have a long `if...else if` chain that checks a *single variable* against multiple *specific values*, a `switch` statement is often cleaner and more readable.

• It evaluates an expression (e.g., `dayOfWeek`).
• It matches the expression's value to a `case` clause.
• The `break` keyword is essential. It stops execution and exits the `switch` block. Without it, the code would "fall through" and execute the next `case` as well!
• The `default` clause is a fallback, similar to `else`, if no `case` matches.

let dayOfWeek = "Wednesday";

switch (dayOfWeek) {
  case "Monday":
    console.log("Start of the week.");
    break;
  case "Wednesday":
    console.log("Hump day!");
    break;
  case "Friday":
    console.log("Weekend is here!");
    break;
  default:
    console.log("It's some other day.");
}
// Output: Hump day!

5. The Ternary Operator: The One-Liner Conditional

The conditional (or "ternary") operator is a compact shortcut for a simple `if...else` statement. It's often used to assign a value to a variable based on a condition.

Syntax: condition ? expressionIfTrue : expressionIfFalse

let age = 21;
let message = (age >= 18) ? "Can vote" : "Cannot vote";

console.log(message);
// Output: Can vote

6. Truthy and Falsy Values: The Hidden Conditions

In JavaScript, conditions don't have to be strictly `true` or `false`. Any value can be evaluated in a conditional context. JavaScript has six **falsy** values—values that are treated as `false` in a conditional:

• `false`
• `0` (zero)
• `""` (an empty string)
• `null`
• `undefined`
• `NaN` (Not a Number)

**Everything else is truthy.** This includes non-empty strings (`"hello"` , `"0"`), non-zero numbers (`-1`, `100`), objects (``), and arrays (`[]`). This allows for powerful shortcuts:

let username = "";

if (username) { // This is falsy
  console.log("Welcome, " + username);
} else {
  console.log("Please enter a username.");
}
// Output: Please enter a username.

Key Takeaway: Always use the **strict equality operator (`===`)** instead of the loose equality operator (`==`). `===` checks both value and type, preventing bugs where `0 == false` evaluates to `true`.