If–else statement in Javascript - Step-by-Step Execution

Concept Flow - If–else statement

Start

↓

Evaluate condition

↓

Execute 'if' block

↓

End

↓

Execute 'else' block

↓

End

The program checks a condition. If true, it runs the 'if' block; otherwise, it runs the 'else' block.

Execution Sample

Javascript

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

This code checks if age is 18 or more and prints 'Adult' if true, otherwise 'Minor'.

Execution Table

Step	Condition (age >= 18)	Result	Branch Taken	Output
1	18 >= 18	true	if block	Adult
2	N/A	N/A	End	Program ends

💡 Condition is true at step 1, so 'if' block runs and program ends after.

Variable Tracker

Variable	Start	After Step 1	Final
age	18	18	18

Key Moments - 2 Insights

Why does the program print 'Adult' and not 'Minor'?

Because at step 1 in the execution table, the condition 'age >= 18' is true, so the 'if' block runs and the 'else' block is skipped.

What happens if the condition is false?

If the condition was false, the program would run the 'else' block instead, as shown by the branch taken in the execution table.

Visual Quiz - 3 Questions

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

A Error

B Adult

C Minor

D No output

💡 Hint

Check the 'Output' column at step 1 in the execution table.

At which step does the program decide which block to run?

A Step 2

B Before Step 1

C Step 1

D After Step 2

💡 Hint

Look at the 'Condition' and 'Branch Taken' columns in the execution table.

If age was 16, what would the output be according to the tables?

A Minor

B Adult

C No output

D Error

💡 Hint

Think about the condition 'age >= 18' and which branch runs when false.

Concept Snapshot

if (condition) {
  // code runs if condition true
} else {
  // code runs if condition false
}
Checks condition once, runs one block only.

Full Transcript

This visual execution shows how an if-else statement works in JavaScript. The program starts by checking the condition 'age >= 18'. If true, it runs the code inside the 'if' block and prints 'Adult'. If false, it runs the 'else' block and prints 'Minor'. The execution table traces each step, showing the condition result, which branch runs, and the output. The variable tracker shows the value of 'age' stays the same. Key moments clarify why the program chooses one block over the other. The quiz tests understanding by asking about outputs and decision steps.

Practice

1. What does an if-else statement do in JavaScript?

easy

A. It repeats a block of code multiple times.

B. It creates a new variable.

C. It defines a function to be used later.

D. It chooses between two actions based on a condition.

Solution

1. Step 1: Understand the purpose of if-else

   An if-else statement lets the program decide between two paths depending on a condition.

2. Step 2: Match the description to the options

   Only It chooses between two actions based on a condition. describes choosing between two actions based on a condition.

3. Final Answer:

   It chooses between two actions based on a condition. -> Option D

4. Quick Check:

   If-else = choose between two actions [OK]

Hint: If-else picks one of two paths based on true or false [OK]

Common Mistakes:

• Confusing if-else with loops
• Thinking if-else defines functions
• Believing if-else creates variables

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

easy

A. if (condition) { } else { }

B. if condition { } else { }

C. if (condition) then { } else { }

D. if condition then { } else { }

Solution

1. Step 1: Recall JavaScript if-else syntax

   JavaScript requires parentheses around the condition and braces for blocks: if (condition) { } else { }

2. Step 2: Compare options to correct syntax

   Only if (condition) { } else { } uses parentheses and braces correctly without extra keywords.

3. Final Answer:

   if (condition) { } else { } -> Option A

4. Quick Check:

   Correct syntax uses parentheses and braces [OK]

Hint: Remember: condition in ( ), blocks in { } [OK]

Common Mistakes:

• Omitting parentheses around condition
• Adding 'then' keyword (not in JS)
• Missing braces for code blocks

3. What will be the output of this code?

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

medium

A. Adult

B. Minor

C. undefined

D. Error

Solution

1. Step 1: Evaluate the condition age >= 18

   Since age is 18, the condition age >= 18 is true.

2. Step 2: Determine which block runs

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

3. Final Answer:

   Adult -> Option A

4. Quick Check:

   Condition true -> if block runs -> 'Adult' [OK]

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

Common Mistakes:

• Thinking 18 is less than 18
• Confusing else block runs when condition is true
• Expecting syntax error

4. Find the error in this code:

let score = 75;
if score >= 60 {
  console.log('Pass');
} else {
  console.log('Fail');
}

medium

A. Using else without if

B. Missing semicolon after console.log

C. Missing parentheses around the condition

D. Variable score is not declared

Solution

1. Step 1: Check if-else syntax

   JavaScript requires parentheses around the condition in if statements.

2. Step 2: Identify the missing parentheses

   The code has if score >= 60 { ... } but it should be if (score >= 60) { ... }

3. Final Answer:

   Missing parentheses around the condition -> Option C

4. Quick Check:

   if condition must be in ( ) [OK]

Hint: Always put condition inside ( ) after if [OK]

Common Mistakes:

• Forgetting parentheses around condition
• Thinking semicolon is required after console.log block
• Confusing else usage

5. You want to print 'Even' if a number is even, and 'Odd' if it is odd. Which code correctly uses if-else to do this?

let num = 7;
// Choose the correct code snippet

hard

A. if (num % 2 != 0) {
console.log('Even');
} else {
console.log('Odd');
}

B. if (num % 2 === 0) {
console.log('Even');
} else {
console.log('Odd');
}

C. if (num % 2) {
console.log('Even');
} else {
console.log('Odd');
}

D. if (num / 2 === 0) {
console.log('Even');
} else {
console.log('Odd');
}

Solution

1. Step 1: Understand how to check even numbers

   A number is even if remainder when divided by 2 is zero: num % 2 === 0.

2. Step 2: Check each option's condition

   if (num % 2 === 0) { console.log('Even'); } else { console.log('Odd'); } correctly checks num % 2 === 0. Others either use wrong operator or logic.

3. Final Answer:

   if (num % 2 === 0) { console.log('Even'); } else { console.log('Odd'); } -> Option B

4. Quick Check:

   Even check uses num % 2 === 0 [OK]

Hint: Use modulo (%) to test evenness: zero remainder means even [OK]

Common Mistakes:

• Using division (/) instead of modulo (%)
• Checking if remainder is truthy instead of zero
• Reversing even and odd conditions