Nested conditional statements in Javascript - Step-by-Step Execution

Concept Flow - Nested conditional statements

Start

↓

Check Condition 1

|Yes↓

Check Condition 2

|Yes↓

Execute Block A

↓

End

No↓

Execute Block B

↓

End

No↓

Execute Block C

↓

End

First, check the outer condition. If true, check the inner condition. Depending on inner condition, run different code. If outer condition is false, run another code block.

Execution Sample

Javascript

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

Checks if x is greater than 5, then if x is less than 15, prints 'A', else 'B'. If x is not greater than 5, prints 'C'.

Execution Table

Step	Condition Checked	Condition Result	Branch Taken	Output
1	x > 5	true	Enter first if block
2	x < 15	true	Enter nested if block	Print 'A'
3	End		Exit all blocks

💡 x is 10, so x > 5 is true and x < 15 is true; after printing 'A', program ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
x	10	10	10	10

Key Moments - 2 Insights

Why do we check the second condition only if the first condition is true?

Because the second condition is inside the first if block (see execution_table step 2), it only runs if the first condition is true.

What happens if the first condition is false?

The program skips the nested if and runs the else block at the end (not shown in this run because x > 5 is true).

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 2?

A Print 'B'

B Print 'A'

C Print 'C'

D No output

💡 Hint

Check the 'Output' column at step 2 in the execution_table.

At which step does the program decide to enter the nested if block?

A Step 1

B Step 3

C Step 2

D No nested if block entered

💡 Hint

Look at the 'Branch Taken' column and see when nested if is entered.

If x was 3 instead of 10, which output would appear?

A 'C'

B 'A'

C 'B'

D No output

💡 Hint

Refer to variable_tracker for x values and execution_table logic for condition outcomes.

Concept Snapshot

Nested conditionals check one condition inside another.
Syntax: if (cond1) { if (cond2) { ... } else { ... } } else { ... }
Inner condition runs only if outer is true.
Use to handle multiple decision layers.
Outputs depend on combined conditions.

Full Transcript

This example shows nested conditional statements in JavaScript. First, the program checks if x is greater than 5. If yes, it then checks if x is less than 15. If both are true, it prints 'A'. If the first condition is false, it prints 'C'. This flow helps decide between multiple options step-by-step. Variables stay the same during checks. The nested if only runs if the outer if is true. This is useful to make decisions that depend on multiple conditions.

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