Nested conditional statements in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested if-else with number checks

What is the output of the following code snippet?

Javascript

const num = 15;
if (num > 10) {
  if (num < 20) {
    console.log('A');
  } else {
    console.log('B');
  }
} else {
  console.log('C');
}

A B

B A

C C

D undefined

💡 Hint

Check the conditions step by step starting from the outer if.

The number 15 is greater than 10, so the outer if is true. Then inside, 15 is less than 20, so it prints 'A'.

❓ Predict Output

intermediate

Nested conditionals with string comparison

What will be logged to the console?

Javascript

const color = 'red';
if (color === 'blue') {
  if (color.length > 3) {
    console.log('Blue and long');
  } else {
    console.log('Blue and short');
  }
} else {
  console.log('Not blue');
}

A undefined

B Blue and short

C Blue and long

D Not blue

💡 Hint

Check the first condition comparing the color variable.

The color is 'red', which is not equal to 'blue', so the else block runs and prints 'Not blue'.

❓ Predict Output

advanced

Output of nested ternary operators

What is the output of this code?

Javascript

const x = 5;
const y = 10;
const result = x > 3 ? (y < 10 ? 'A' : 'B') : 'C';
console.log(result);

A C

B undefined

C B

D A

💡 Hint

Evaluate the outer condition first, then the inner ternary.

x is 5 which is > 3, so check y < 10. y is 10, not less than 10, so result is 'B'.

❓ Predict Output

advanced

Nested if-else with multiple conditions

What will be the output of this code?

Javascript

const score = 75;
if (score >= 90) {
  console.log('A');
} else {
  if (score >= 70) {
    console.log('B');
  } else {
    console.log('C');
  }
}

A B

B C

C A

D undefined

💡 Hint

Check the score against 90 first, then 70.

Score 75 is not >= 90, so outer else runs. Then 75 >= 70 is true, so prints 'B'.

❓ Predict Output

expert

Complex nested conditionals with logical operators

What is the output of this code snippet?

Javascript

const a = 4;
const b = 7;
if (a > 3) {
  if (b < 5) {
    console.log('X');
  } else if (b === 7) {
    console.log('Y');
  } else {
    console.log('Z');
  }
} else {
  console.log('W');
}

A Y

B X

C Z

D W

💡 Hint

Check each nested condition carefully in order.

a is 4 > 3 true, then b is 7, not < 5, but equals 7, so prints 'Y'.

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