If statement in Javascript - Step-by-Step Execution

Concept Flow - If statement

Start

↓

Evaluate condition

↓

Execute if-block

↓

Continue

↓

Skip if-block

↓

Continue

The program checks a condition. If true, it runs the code inside the if-block. If false, it skips it and continues.

Execution Sample

Javascript

let x = 10;
if (x > 5) {
  console.log('x is greater than 5');
}

This code checks if x is greater than 5 and prints a message if true.

Execution Table

Step	Condition (x > 5)	Result	Branch Taken	Output
1	10 > 5	true	Execute if-block	x is greater than 5 printed
2	End of if statement	-	Continue	-

💡 Condition is true, so the if-block runs once, then execution continues.

Variable Tracker

Variable	Start	After Step 1	Final
x	10	10	10

Key Moments - 2 Insights

Why does the code inside the if-block run only when the condition is true?

Because the if statement checks the condition first (see execution_table step 1). If the condition is true, it runs the code inside. If false, it skips it.

What happens if the condition is false?

The program skips the if-block entirely and continues with the next code (see concept_flow where 'No' branch skips the block).

Visual Quiz - 3 Questions

Look at the execution table, what is the result of the condition at step 1?

A false

B true

C undefined

D error

💡 Hint

Check the 'Condition (x > 5)' column at step 1 in the execution_table.

At which step does the program decide to execute the if-block?

A Before Step 1

B Step 2

C Step 1

D After Step 2

💡 Hint

Look at the 'Branch Taken' column in execution_table for when the if-block runs.

If x was 3 instead of 10, what would happen in the execution table?

A Condition would be false and if-block skipped

B Condition would be true and if-block executed

C Program would crash

D Output would be 'x is greater than 5'

💡 Hint

Think about how the condition (x > 5) changes when x is 3, referencing the condition column.

Concept Snapshot

If statement syntax:
if (condition) {
  // code runs if condition is true
}

Checks condition once.
Runs code only if true.
Skips code if false.

Full Transcript

This visual execution shows how an if statement works in JavaScript. The program starts by evaluating the condition inside the if parentheses. If the condition is true, the code inside the curly braces runs. If false, the code inside is skipped. In the example, x is 10, so the condition x > 5 is true. The message 'x is greater than 5' is printed. The variable x stays the same throughout. If x were less or equal to 5, the message would not print. This helps control which code runs based on conditions.