Nested conditional statements in Javascript - Mini Project: Build & Apply

Nested Conditional Statements

📖 Scenario: You are building a simple program to check the weather and temperature to decide what to wear.

🎯 Goal: Create a program that uses nested conditional statements to decide clothing advice based on weather and temperature.

📋 What You'll Learn

Create a variable weather with the exact value "rainy"

Create a variable temperature with the exact value 15

Use a nested if statement to check weather and then temperature

Print the exact advice string based on conditions

💡 Why This Matters

🌍 Real World

Weather apps and smart assistants use nested conditions to give advice based on multiple factors like weather and temperature.

💼 Career

Understanding nested conditional statements is essential for programming logic in many jobs like web development, app development, and automation.

1

Create weather and temperature variables

Create a variable called weather and set it to the string "rainy". Also create a variable called temperature and set it to the number 15.

Javascript

// Your code here

Hint

Use let to create variables and assign the exact values.

2

Add a variable for warm temperature threshold

Create a variable called warmThreshold and set it to the number 20.

Javascript

let weather = "rainy";
let temperature = 15;
// Your code here

Hint

This variable will help us decide if it is warm or cold.

3

Write nested if statements for clothing advice

Use a nested if statement: first check if weather is "rainy". Inside that, check if temperature is greater than warmThreshold. If yes, set a variable advice to "Take an umbrella but wear light clothes.". Otherwise, set advice to "Take an umbrella and wear a coat.". If weather is not "rainy", set advice to "No umbrella needed.".

Javascript

let weather = "rainy";
let temperature = 15;
let warmThreshold = 20;
// Your code here

Hint

Remember to use === for comparison and nest the second if inside the first.

4

Print the clothing advice

Write a console.log statement to print the value of the variable advice.

Javascript

let weather = "rainy";
let temperature = 15;
let warmThreshold = 20;
let advice;
if (weather === "rainy") {
    if (temperature > warmThreshold) {
        advice = "Take an umbrella but wear light clothes.";
    } else {
        advice = "Take an umbrella and wear a coat.";
    }
} else {
    advice = "No umbrella needed.";
}
// Your code here

Hint

Use console.log(advice); to print the advice.

Practice

1. What does a nested conditional statement mean in JavaScript?
if (condition1) { if (condition2) { /* code */ } }

easy

A. A loop inside a condition

B. A condition inside another condition

C. Two conditions checked at the same time

D. A function inside a condition

Solution

1. Step 1: Understand the structure of nested conditionals

   Nested conditionals mean one if statement is placed inside another if statement's block.

2. Step 2: Identify the meaning of the code snippet

   The code checks condition1 first, and only if true, it checks condition2 inside it.

3. Final Answer:

   A condition inside another condition -> Option B

4. Quick Check:

   Nested conditional = condition inside condition [OK]

Hint: Look for if inside another if block [OK]

Common Mistakes:

• Thinking nested means conditions checked together
• Confusing nested conditionals with loops
• Assuming functions are involved

2. Which of the following is the correct syntax for nested if statements in JavaScript?

easy

A. if (a > 0) { if (b > 0) { console.log('Both positive'); } }

B. if (a > 0) if (b > 0) console.log('Both positive'); }

C. if (a > 0) { if (b > 0) console.log('Both positive'); } else }

D. if a > 0 { if b > 0 { console.log('Both positive'); } }

Solution

1. Step 1: Check proper use of braces and parentheses

   if (a > 0) { if (b > 0) { console.log('Both positive'); } } uses parentheses for conditions and braces to group code blocks correctly.

2. Step 2: Verify syntax correctness

   The other options have missing or misplaced braces or parentheses causing syntax errors.

3. Final Answer:

   if (a > 0) { if (b > 0) { console.log('Both positive'); } } -> Option A

4. Quick Check:

   Correct nested if syntax = if (a > 0) { if (b > 0) { console.log('Both positive'); } } [OK]

Hint: Match each if with parentheses and braces [OK]

Common Mistakes:

• Missing braces for inner if block
• Omitting parentheses around conditions
• Extra or misplaced braces

3. What will be the output of this code?

let x = 5;
if (x > 0) {
  if (x < 10) {
    console.log('A');
  } else {
    console.log('B');
  }
} else {
  console.log('C');
}

medium

A. No output

B. B

C. C

D. A

Solution

1. Step 1: Evaluate the outer if condition

   x = 5, which is greater than 0, so the outer if block runs.

2. Step 2: Evaluate the inner if condition

   Inside, x < 10 is true (5 < 10), so it prints 'A'.

3. Final Answer:

   A -> Option D

4. Quick Check:

   5 > 0 and 5 < 10 prints 'A' [OK]

Hint: Check outer condition first, then inner [OK]

Common Mistakes:

• Ignoring inner else block
• Confusing output with 'B' or 'C'
• Assuming no output if conditions are true

4. Find the error in this nested conditional code:

let num = 10;
if (num > 5) {
  if num < 15 {
    console.log('Inside range');
  }
}

medium

A. Using console.log incorrectly

B. Missing braces for outer if block

C. Missing parentheses around inner if condition

D. No error, code is correct

Solution

1. Step 1: Check syntax of inner if statement

   Inner if is written as if num < 15 { missing parentheses around condition.

2. Step 2: Confirm correct syntax for if statements

   JavaScript requires parentheses around conditions: if (num < 15) {.

3. Final Answer:

   Missing parentheses around inner if condition -> Option C

4. Quick Check:

   if conditions need parentheses [OK]

Hint: Always put parentheses around if conditions [OK]

Common Mistakes:

• Forgetting parentheses in if conditions
• Assuming braces are optional
• Thinking console.log causes error

5. You want to write a nested conditional that prints:
- 'Small positive' if a number is > 0 and < 10
- 'Large positive' if a number is >= 10
- 'Non-positive' otherwise
Which code correctly implements this?

hard

A. if (num > 0) { if (num < 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); }

B. if (num > 0 && num < 10) { console.log('Small positive'); } else if (num >= 10) { console.log('Large positive'); } else { console.log('Non-positive'); }

C. if (num > 0) { if (num <= 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); }

D. if (num >= 0) { if (num < 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); }

Solution

1. Step 1: Check conditions for small positive numbers

   if (num > 0) { if (num < 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); } checks if num > 0, then inside if num < 10 to print 'Small positive'.

2. Step 2: Check conditions for large positive and non-positive

   Else inside outer if prints 'Large positive' for num >= 10, else prints 'Non-positive'.

3. Step 3: Verify other options

   The option with combined conditions (&& and else if) is logically correct but does not use nested if statements. The option with outer condition num >= 0 incorrectly classifies 0 as 'Small positive'. The option with inner condition num <= 10 incorrectly classifies 10 as 'Small positive'.

4. Final Answer:

   if (num > 0) { if (num < 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); } -> Option A

5. Quick Check:

   Nested if with correct ranges = if (num > 0) { if (num < 10) { console.log('Small positive'); } else { console.log('Large positive'); } } else { console.log('Non-positive'); } [OK]

Hint: Check each condition range carefully in nested ifs [OK]

Common Mistakes:

• Using <= instead of < for small positive
• Including zero as positive
• Not nesting conditions properly