Recursion Concept and Call Stack Visualization in DSA Typescript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the function call itself recursively.

DSA Typescript

function factorial(n: number): number {
  if (n <= 1) return 1;
  return n * factorial([1]);
}

Drag options to blanks, or click blank then click option'

An + 1

Bn - 1

C1

Dn

Attempts:

3 left

💡 Hint

Common Mistakes

Using n + 1 causes infinite recursion.

Using n directly does not reduce the problem size.

The function calls itself with n - 1 to reduce the problem size until it reaches the base case.

2fill in blank

medium

Complete the code to correctly calculate the sum of numbers from 1 to n using recursion.

DSA Typescript

function sumToN(n: number): number {
  if (n === 1) return 1;
  return n + sumToN([1]);
}

Drag options to blanks, or click blank then click option'

An - 1

B1

Cn + 1

Dn

Attempts:

3 left

💡 Hint

Common Mistakes

Using n + 1 causes infinite recursion.

Using n directly does not reduce the problem size.

The function calls itself with n - 1 to add all numbers down to 1.

3fill in blank

hard

Fix the error in the recursive Fibonacci function to avoid infinite recursion.

DSA Typescript

function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci([1]) + fibonacci(n - 2);
}

Drag options to blanks, or click blank then click option'

An - 1

B1

Cn - 2

Dn + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using n + 1 causes infinite recursion.

Using the same argument twice does not reduce the problem.

The function must call fibonacci with n - 1 and n - 2 to correctly compute the Fibonacci sequence.

4fill in blank

hard

Fill both blanks to create a recursive function that prints numbers from n down to 1.

DSA Typescript

function printDown(n: number): void {
  if (n === 0) return;
  console.log([1]);
  printDown([2]);
}

Drag options to blanks, or click blank then click option'

An

Bn - 1

Cn + 1

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Printing n - 1 before calling printDown causes off-by-one errors.

Calling printDown with n + 1 causes infinite recursion.

The function prints the current number n and then calls itself with n - 1 to count down.

5fill in blank

hard

Fill both blanks to create a recursive function that builds an array of numbers from 1 to n.

DSA Typescript

function buildArray(n: number): number[] {
  if (n === 0) return [];
  const arr = buildArray([1]);
  arr.push([2]);
  return arr;
}

Drag options to blanks, or click blank then click option'

An - 1

Bn

C1

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Pushing 1 every time instead of n causes incorrect arrays.

Calling buildArray with n + 1 causes infinite recursion.

The function calls itself with n - 1 to build the smaller array, then adds n to the end. The base case returns an empty array when n is 0.

Practice

1. What happens when a recursive function calls itself without a stopping condition?

easy

A. It runs only once and stops

B. It causes an infinite loop leading to a stack overflow error

C. It immediately returns without doing anything

D. It throws a syntax error

Solution

1. Step 1: Understand recursion stopping condition

   A recursive function must have a base case to stop calling itself; otherwise, it keeps calling endlessly.

2. Step 2: Effect of missing stopping condition

   Without a stopping condition, the function calls stack up until memory runs out, causing a stack overflow error.

3. Final Answer:

   It causes an infinite loop leading to a stack overflow error -> Option B

4. Quick Check:

   Missing base case = infinite recursion [OK]

Hint: Always check for a base case to stop recursion [OK]

Common Mistakes:

• Assuming recursion stops automatically
• Confusing infinite loop with syntax error
• Thinking recursion runs only once without base case

2. Which of the following is the correct syntax to define a recursive function in TypeScript?

easy

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

B. function recurse(n: number) { while(n > 0) recurse(n - 1); }

C. function recurse(n: number): number { return n + recurse(n + 1); }

D. function recurse(n: number): number { return n * recurse(n); }

Solution

1. Step 1: Check for base case and recursive call

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

2. Step 2: Analyze other options for errors

   The version with a while loop lacks a proper base case and return statement; another calls recurse with n + 1 causing infinite recursion; another calls recurse with the same n causing infinite recursion.

3. Final Answer:

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

4. Quick Check:

   Base case + decreasing argument = correct recursion [OK]

Hint: Look for base case and argument reducing in recursion [OK]

Common Mistakes:

• Missing base case
• Increasing argument causing infinite recursion
• Using loops instead of recursion

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

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

medium

A. 9

B. 1

C. 3

D. 6

Solution

1. Step 1: Trace factorial calls

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

2. Step 2: Calculate return values

   factorial(1) = 1 * 1 = 1; factorial(2) = 2 * 1 = 2; factorial(3) = 3 * 2 = 6.

3. Final Answer:

   6 -> Option D

4. Quick Check:

   3! = 6 [OK]

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

Common Mistakes:

• Confusing factorial with sum
• Not tracing base case return
• Multiplying incorrectly

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

function sumTo(n: number): number {
  return n + sumTo(n - 1);
}

medium

A. Change n - 1 to n + 1

B. Change return to console.log

C. Add a base case: if (n <= 0) return 0;

D. Remove the recursive call

Solution

1. Step 1: Identify missing base case

   The function lacks a stopping condition, so it will recurse infinitely causing stack overflow.

2. Step 2: Fix by adding base case

   Adding if (n <= 0) return 0; stops recursion when n reaches 0 or less.

3. Final Answer:

   Add a base case: if (n <= 0) return 0; -> Option C

4. Quick Check:

   Base case needed to stop recursion [OK]

Hint: Always add base case to recursive functions [OK]

Common Mistakes:

• Ignoring base case causes infinite recursion
• Changing recursive call incorrectly
• Removing recursion defeats purpose

5. Given the recursive function below, what will be the output when calling printNumbers(3)? Visualize the call stack.

function printNumbers(n: number): void {
  if (n === 0) return;
  printNumbers(n - 1);
  console.log(n);
}

hard

A. 1 2 3

B. 3 2 1

C. 3 3 3

D. 1 1 1

Solution

1. Step 1: Understand call stack order

   printNumbers(3) calls printNumbers(2), which calls printNumbers(1), which calls printNumbers(0) and returns immediately.

2. Step 2: Trace console.log calls after recursion

   After reaching base case, console.log prints 1, then 2, then 3 as the stack unwinds.

3. Final Answer:

   1 2 3 -> Option A

4. Quick Check:

   Post-recursion print = ascending order [OK]

Hint: Print after recursive call prints ascending order [OK]

Common Mistakes:

• Printing before recursion causes descending order
• Confusing call stack push/pop order
• Expecting repeated numbers