JavaScript Conditional Statements (JS-03)

Track: JavaScript Basics
Lesson: JS-03 / JS-10

🎯 Lesson Goal

By the end of this lesson, you will be able to make decisions in JavaScript programs using conditional statements such as if, else, else if, and switch.

---

📌 Prerequisites

• JS-01: Variables and Data Types
• JS-02: Operators and Expressions

You should already understand:

• Variables
• Comparison operators (>, <, ===)
• Logical operators (&&, ||)

---

📘 Why Do We Need Conditions?

In real life, decisions happen all the time:

• If it rains → take an umbrella
• If marks ≥ 40 → pass
• If user is logged in → show dashboard

JavaScript uses conditional statements to make such decisions.

---

🔹 The if Statement

The if statement executes code only if the condition is true.

Syntax

if (condition) {
  // code to execute
}

Example

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote");
}

✔ Output:

You are eligible to vote

---

🔹 The if...else Statement

Used when there are two possible outcomes.

Syntax

if (condition) {
  // true block
} else {
  // false block
}

Example

let marks = 35;

if (marks >= 40) {
  console.log("Pass");
} else {
  console.log("Fail");
}

✔ Output:

Fail

---

🔹 The else if Ladder

Used when there are multiple conditions.

Example

let score = 78;

if (score >= 90) {
  console.log("Grade A");
} else if (score >= 75) {
  console.log("Grade B");
} else if (score >= 60) {
  console.log("Grade C");
} else {
  console.log("Fail");
}

✔ Output:

Grade B

---

🔹 Using Logical Operators in Conditions

You can combine conditions using && (AND) and || (OR).

Example (AND)

let age = 22;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Entry allowed");
}

Example (OR)

let isAdmin = false;
let isEditor = true;

if (isAdmin || isEditor) {
  console.log("Access granted");
}

---

🔹 The switch Statement

Used when you want to compare one value against many options.

Syntax

switch (expression) {
  case value1:
    // code
    break;
  case value2:
    // code
    break;
  default:
    // code
}

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");
}

✔ Output:

Wednesday

🔴 Important:
Always use break to stop execution.

---

🔹 Conditional (Ternary) Operator

A short form of if...else.

Syntax

condition ? value_if_true : value_if_false;

Example

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

---

⚠️ Common Mistakes

• Using = instead of ===
• Forgetting curly braces { }
• Missing break in switch
• Writing overly complex conditions in one line

---

🧠 Practice Tasks

1. Check whether a number is positive or negative
2. Write a program to check pass/fail using marks
3. Assign grades using else if
4. Use switch to display weekday names
5. Convert an if...else into a ternary operator

---

🧪 Mini Coding Challenge

let temperature = 32;

Write a condition to display:

• “Cold” if temp < 20
• “Normal” if 20–30
• “Hot” if > 30

---

📝 Summary

• if executes code when condition is true
• if...else handles two outcomes
• else if handles multiple conditions
• switch is useful for fixed values
• Ternary operator is a shortcut for simple decisions

---

➡️ Next Lesson

JavaScript Loops (JS-04)

---

🏅 Quiz & Badge

Quiz and badges will be enabled soon.

---