Nested conditional statements in Javascript

Introduction

Nested conditional statements help you make decisions inside other decisions. This lets your program check many things step by step.

When you want to check if a person is old enough and also if they have a ticket before entering a movie.

When you need to decide what to wear based on weather and time of day.

When you want to check if a number is positive, and if it is even or odd.

When you want to give different discounts based on customer type and purchase amount.

Syntax

Javascript

if (condition1) {
  if (condition2) {
    // code if both condition1 and condition2 are true
  } else {
    // code if condition1 is true but condition2 is false
  }
} else {
  // code if condition1 is false
}

You can put one if statement inside another to check multiple things.

Use curly braces { } to group the code inside each condition.

Examples

Check if someone is 18 or older, then check if they have a ticket.

Javascript

if (age >= 18) {
  if (hasTicket) {
    console.log('Allowed to enter');
  } else {
    console.log('No ticket');
  }
} else {
  console.log('Too young');
}

Check if score is passing, then check if it is excellent.

Javascript

if (score >= 50) {
  if (score >= 90) {
    console.log('Grade A');
  } else {
    console.log('Passed');
  }
} else {
  console.log('Failed');
}

Sample Program

This program decides what to do based on temperature and rain. If it's warm and not raining, go for a walk. If it's warm but raining, take an umbrella. Otherwise, stay inside.

Javascript

const temperature = 30;
const isRaining = false;

if (temperature > 20) {
  if (!isRaining) {
    console.log('Go for a walk');
  } else {
    console.log('Take an umbrella');
  }
} else {
  console.log('Stay inside');
}

Important Notes

Indent your code inside each if or else block to keep it clear.

Too many nested conditions can be hard to read; consider other ways if it gets complicated.

Summary

Nested conditionals let you check one thing inside another.

Use them to make decisions that depend on multiple checks.

Keep your code clean and easy to read by using proper indentation.

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