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.