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.

Practice

1. What does an if statement do in JavaScript?

easy

A. Declares a variable

B. Repeats code multiple times

C. Defines a new function

D. Runs code only if a condition is true

Solution

1. Step 1: Understand the purpose of an if statement

   An if statement checks a condition and runs code only when that condition is true.

2. Step 2: Compare options with the definition

   Only Runs code only if a condition is true matches this behavior exactly.

3. Final Answer:

   Runs code only if a condition is true -> Option D

4. Quick Check:

   If statement = runs code if true [OK]

Hint: If it runs code only when true, it's an if statement [OK]

Common Mistakes:

• Confusing if with loops
• Thinking if declares variables
• Mixing if with function definitions

2. Which of the following is the correct syntax for an if statement in JavaScript?

easy

A. if condition { console.log('Yes'); }

B. if (condition) console.log('Yes');

C. if condition: console.log('Yes');

D. if (condition) then { console.log('Yes'); }

Solution

1. Step 1: Recall JavaScript if syntax

   The condition must be inside parentheses, and the code block can be inside curly braces or a single statement without braces.

2. Step 2: Check each option

   if (condition) console.log('Yes'); correctly uses parentheses around the condition and a statement without braces.

3. Final Answer:

   if (condition) console.log('Yes'); -> Option B

4. Quick Check:

   Parentheses around condition = correct syntax [OK]

Hint: Condition must be in parentheses for if [OK]

Common Mistakes:

• Omitting parentheses around condition
• Using colons instead of braces
• Adding 'then' keyword (not in JS)

3. What will be the output of this code?

let x = 10;
if (x > 5) {
  console.log('Big');
} else {
  console.log('Small');
}

medium

A. Small

B. 10

C. Big

D. No output

Solution

1. Step 1: Evaluate the condition x > 5

   Since x is 10, which is greater than 5, the condition is true.

2. Step 2: Determine which block runs

   The if block runs and prints 'Big'. The else block is skipped.

3. Final Answer:

   Big -> Option C

4. Quick Check:

   10 > 5 is true, so output is 'Big' [OK]

Hint: Check if condition is true to pick output [OK]

Common Mistakes:

• Choosing else output when condition is true
• Confusing variable value with output
• Ignoring else block

4. Find the error in this code:

if x == 5 {
  console.log('Equal');
}

medium

A. Missing parentheses around condition

B. Using double equals instead of triple equals

C. Missing semicolon after console.log

D. Curly braces should be parentheses

Solution

1. Step 1: Check if statement syntax

   In JavaScript, the condition must be inside parentheses after if.

2. Step 2: Identify the error

   The code misses parentheses around x == 5, causing a syntax error.

3. Final Answer:

   Missing parentheses around condition -> Option A

4. Quick Check:

   Condition needs parentheses in if [OK]

Hint: Always put condition inside parentheses in if [OK]

Common Mistakes:

• Omitting parentheses around condition
• Confusing == and === (both valid but different)
• Thinking semicolon is mandatory after console.log

5. You want to print 'Adult' if age is 18 or more, otherwise 'Minor'. Which code correctly uses an if statement?

hard

A. if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); }

B. if age >= 18 then { console.log('Adult'); } else { console.log('Minor'); }

C. if (age > 18) { console.log('Adult'); } else { console.log('Minor'); }

D. if (age = 18) { console.log('Adult'); } else { console.log('Minor'); }

Solution

1. Step 1: Check condition for age 18 or more

   The condition should be age >= 18 to include 18 and above.

2. Step 2: Verify syntax and logic

   if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } uses correct syntax and condition. if age >= 18 then { console.log('Adult'); } else { console.log('Minor'); } uses invalid 'then'. if (age > 18) { console.log('Adult'); } else { console.log('Minor'); } excludes age 18. if (age = 18) { console.log('Adult'); } else { console.log('Minor'); } uses assignment (=) instead of comparison (== or >=).

3. Final Answer:

   if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } -> Option A

4. Quick Check:

   Use >= and correct syntax for if-else [OK]

Hint: Use >= for 18 or more, no 'then' keyword [OK]

Common Mistakes:

• Using assignment (=) instead of comparison
• Using 'then' keyword (not in JS)
• Using > instead of >= to include 18