Recursion vs Iteration When Each Wins in DSA Javascript - Visual Comparison

Concept Flow - Recursion vs Iteration When Each Wins

Start Problem

↓

Choose Approach

↓

Recursion

↓

Divide Problem

↓

Base Case?

↓

Return Result

↓

Update State

↓

Repeat or Exit

↓

Return Result

This flow shows how to decide between recursion and iteration, then how each approach processes the problem step-by-step.

Execution Sample

DSA Javascript

function factorialRec(n) {
  if (n <= 1) return 1;
  return n * factorialRec(n - 1);
}

function factorialIter(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) result *= i;
  return result;
}

Calculates factorial of n using recursion and iteration.

Execution Table

Step	Approach	Operation	Call/Loop State	Return/Output	Visual State
1	Recursion	Call factorialRec(3)	n=3		Stack: [3]
2	Recursion	Call factorialRec(2)	n=2		Stack: [3, 2]
3	Recursion	Call factorialRec(1)	n=1	Return 1	Stack: [3, 2, 1]
4	Recursion	Return 2 * 1	n=2	Return 2	Stack: [3, 2]
5	Recursion	Return 3 * 2	n=3	Return 6	Stack: [3]
6	Iteration	Initialize result=1	i=2		result=1
7	Iteration	Multiply result by i=2	i=2	result=2	result=2
8	Iteration	Multiply result by i=3	i=3	result=6	result=6
9	Iteration	Loop ends (i=4 > n=3)	i=4	Return 6	result=6
10	End	Both approaches return 6		Output=6	Final result=6

💡 Recursion ends when base case n=1 is reached; iteration ends when loop variable exceeds n.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	After Step 8	After Step 9	Final
n (Recursion)	3	3	2	1	2	3
Stack (Recursion)	[]	[3]	[3,2]	[3,2,1]	[3,2]	[3]
result (Iteration)							1	2	6	6	6
i (Iteration)							2	3	4	4	4

Key Moments - 3 Insights

Why does recursion stop calling itself at n=1?

Because of the base case check (n <= 1) in step 3 of execution_table, recursion returns 1 to stop further calls.

Why does iteration loop stop when i=4?

Because the loop condition i <= n fails at i=4 (step 9), so the loop exits and returns the result.

How does recursion use the call stack compared to iteration?

Recursion builds a stack of calls (steps 1-5), storing each n until base case, then unwinds; iteration uses a single loop variable and updates result directly (steps 6-9).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of n and what happens?

A n=1, base case reached, returns 1

B n=2, calls factorialRec(1)

C n=3, continues recursion

D n=0, error occurs

💡 Hint

Check the 'Call factorialRec(1)' and 'Return 1' in step 3 of execution_table.

At which step does the iteration loop end?

A Step 7

B Step 8

C Step 9

D Step 10

💡 Hint

Look for 'Loop ends (i=4 > n=3)' in execution_table step 9.

If n was 4 instead of 3, how would the iteration variable 'i' change in variable_tracker?

A It would go up to 5

B It would stop at 4

C It would stay at 3

D It would start at 1

💡 Hint

Iteration loops from i=2 to i<=n inclusive, after last iteration i=n+1 when condition fails (like i=4 for n=3), so for n=4 it goes up to 5.

Concept Snapshot

Recursion vs Iteration:
- Recursion solves by calling itself with smaller inputs until base case.
- Iteration uses loops to repeat steps until condition fails.
- Recursion uses call stack; iteration uses variables.
- Use recursion for divide-and-conquer or tree problems.
- Use iteration for simple loops or when memory is limited.

Full Transcript

This lesson compares recursion and iteration by tracing factorial calculation. Recursion calls itself reducing n until base case n=1, then returns results up the call stack. Iteration uses a loop multiplying result from 2 to n. The execution table shows each step, call, and variable state. Key moments explain why recursion stops at base case and iteration stops when loop ends. Quiz questions check understanding of steps and variable changes. The snapshot summarizes when to use each approach.

Practice

1. Which scenario is best suited for using recursion instead of iteration?

easy

A. When the problem requires simple repeated loops

B. When the problem can be divided into smaller similar subproblems

C. When you want to avoid function call overhead

D. When memory usage must be minimal

Solution

1. Step 1: Understand recursion use case

   Recursion works well when a problem can be broken down into smaller versions of itself, like tree traversals or factorial calculation.

2. Step 2: Compare with iteration scenarios

   Iteration is better for simple repeated tasks without nested subproblems, so recursion is preferred for divide-and-conquer problems.

3. Final Answer:

   When the problem can be divided into smaller similar subproblems -> Option B

4. Quick Check:

   Recursion fits divide-and-conquer = C [OK]

Hint: Recursion fits problems breaking into smaller similar parts [OK]

Common Mistakes:

• Thinking iteration is always faster
• Ignoring function call overhead in recursion
• Confusing simple loops with recursive problems

2. Which of the following is the correct syntax for a recursive function in JavaScript?

easy

A. function recurse(n) { while(n > 0) { n--; } return n; }

B. function recurse(n) { for(let i=0; i

C. function recurse(n) { if (n <= 0) return 0; return n + recurse(n - 1); }

D. function recurse(n) { if(n > 0) { return n * recurse(n + 1); } else { return 1; } }

Solution

1. Step 1: Identify recursive call and base case

   function recurse(n) { if (n <= 0) return 0; return n + recurse(n - 1); } has a base case (n <= 0) and calls itself with a smaller argument (n - 1), which is correct recursion.

2. Step 2: Check other options for recursion errors

   function recurse(n) { while(n > 0) { n--; } return n; } uses a loop, not recursion. function recurse(n) { for(let i=0; i 0) { return n * recurse(n + 1); } else { return 1; } } calls recurse with n + 1, causing infinite recursion.

3. Final Answer:

   function recurse(n) { if (n <= 0) return 0; return n + recurse(n - 1); } -> Option C

4. Quick Check:

   Base case + smaller recursive call = B [OK]

Hint: Look for base case and smaller recursive call [OK]

Common Mistakes:

• Missing base case causing infinite recursion
• Using loops instead of recursive calls
• Increasing argument in recursive call causing stack overflow

3. What is the output of the following JavaScript code?

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(4));

medium

A. 24

B. 10

C. 16

D. Error

Solution

1. Step 1: Trace recursive calls for factorial(4)

   factorial(4) calls factorial(3), factorial(3) calls factorial(2), factorial(2) calls factorial(1), factorial(1) calls factorial(0) which returns 1.

2. Step 2: Calculate return values step-by-step

   factorial(1) = 1 * 1 = 1, factorial(2) = 2 * 1 = 2, factorial(3) = 3 * 2 = 6, factorial(4) = 4 * 6 = 24.

3. Final Answer:

   24 -> Option A

4. Quick Check:

   4! = 24 [OK]

Hint: Factorial n! = n * (n-1)! [OK]

Common Mistakes:

• Confusing factorial with sum
• Forgetting base case returns 1
• Miscomputing multiplication order

4. Identify the error in this recursive function and choose the fix:

function sumTo(n) {
  if (n === 1) return 1;
  return n + sumTo(n);
}

medium

A. Change return to console.log

B. Add a base case for n === 0

C. Replace recursion with a for loop

D. Change sumTo(n) to sumTo(n - 1) in the return statement

Solution

1. Step 1: Analyze recursive call argument

   The function calls sumTo(n) again without changing n, causing infinite recursion and stack overflow.

2. Step 2: Fix recursive call to reduce problem size

   Changing sumTo(n) to sumTo(n - 1) reduces n each call, eventually reaching base case n === 1.

3. Final Answer:

   Change sumTo(n) to sumTo(n - 1) in the return statement -> Option D

4. Quick Check:

   Recursive call must reduce argument = A [OK]

Hint: Recursive calls must progress toward base case [OK]

Common Mistakes:

• Calling function with same argument causing infinite loop
• Missing or wrong base case
• Confusing recursion with iteration fixes

5. You want to process a large list of numbers to find their sum. Which approach is better and why?

hard

A. Iteration is better because it uses less memory and avoids stack overflow

B. Recursion is better because it is easier to write for large lists

C. Recursion with memoization is best for summing lists

D. Recursive function without base case is best for performance

Solution

1. Step 1: Consider recursion limits for large lists

   Recursion uses call stack for each call, which can cause stack overflow for large lists.

2. Step 2: Compare iteration benefits

   Iteration uses constant memory and avoids stack overflow, making it safer and more efficient for large data.

3. Final Answer:

   Iteration is better because it uses less memory and avoids stack overflow -> Option A

4. Quick Check:

   Iteration safer for large data = A [OK]

Hint: Use iteration for large data to avoid stack overflow [OK]

Common Mistakes:

• Assuming recursion always simpler for large data
• Ignoring stack overflow risk
• Misusing memoization for simple sums