Stack overflow concept in Javascript - Mini Project: Build & Apply

Understanding Stack Overflow with Recursion in JavaScript

📖 Scenario: Imagine you are building a simple program that counts down numbers using a function that calls itself. This is called recursion. But if the function calls itself too many times without stopping, the program runs out of space to keep track of these calls. This is called a stack overflow.In this project, you will create a countdown function that shows how a stack overflow can happen if you don't stop the recursion.

🎯 Goal: You will build a recursive countdown function in JavaScript that counts down from a number to zero. You will also add a limit to stop the recursion to avoid a stack overflow error.

📋 What You'll Learn

Create a recursive function called countdown that takes a number parameter n.

Add a stopping condition to the function to prevent infinite recursion.

Call the countdown function with a starting number.

Print the countdown numbers to the console.

💡 Why This Matters

🌍 Real World

Recursion is used in many programming tasks like searching, sorting, and navigating data structures. Understanding stack overflow helps you write safer recursive functions.

💼 Career

Many software development jobs require understanding recursion and how to avoid stack overflow errors to build reliable and efficient programs.

1

Create the recursive countdown function

Write a function called countdown that takes one parameter n. Inside the function, use console.log(n) to print the current number. Then call countdown(n - 1) to count down by one.

Javascript

function countdown(n) {
  // Your code here
}

Hint

Remember, the function calls itself with a smaller number each time.

2

Add a stopping condition to prevent infinite recursion

Add an if statement at the start of the countdown function to check if n is less than 0. If it is, return from the function to stop the recursion.

Javascript

function countdown(n) {
  // Your code here
  console.log(n);
  countdown(n - 1);
}

Hint

This stopping condition prevents the function from calling itself forever.

3

Call the countdown function with a starting number

Write a line of code to call the countdown function with the number 5.

Javascript

function countdown(n) {
  if (n < 0) {
    return;
  }
  console.log(n);
  countdown(n - 1);
}

// Your code here

Hint

Call the function with the number 5 to start the countdown.

4

Observe the countdown output

Run the program and observe the numbers printed to the console. They should count down from 5 to 0.

Javascript

function countdown(n) {
  if (n < 0) {
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(5);

// Your code here to print output (already done by console.log)

Hint

The console should show numbers from 5 down to 0, one per line.

Practice

1. What causes a stack overflow error in JavaScript?

easy

A. Declaring global variables

B. Using too many variables in a function

C. Too many nested function calls without stopping

D. Calling a function only once

Solution

1. Step 1: Understand what the call stack is

   The call stack keeps track of function calls in JavaScript. Each call uses some memory.

2. Step 2: Identify what causes overflow

   If functions call themselves too many times without stopping, the stack runs out of memory, causing overflow.

3. Final Answer:

   Too many nested function calls without stopping -> Option C

4. Quick Check:

   Stack overflow = too many nested calls [OK]

Hint: Stack overflow = infinite or too deep recursion [OK]

Common Mistakes:

• Thinking global variables cause stack overflow
• Confusing variable count with call stack size
• Assuming single function call causes overflow

2. Which of the following JavaScript function definitions will cause a stack overflow when called?

easy

A. function infinite() { infinite(); }

B. function countDown(n) { if(n <= 0) return; countDown(n - 1); }

C. function greet() { console.log('Hello'); }

D. function add(a, b) { return a + b; }

Solution

1. Step 1: Check each function for recursion

   function countDown(n) { if(n <= 0) return; countDown(n - 1); } has a base case stopping recursion. function infinite() { infinite(); } calls itself endlessly without a base case. Options C and D are normal functions without recursion.

2. Step 2: Identify which causes stack overflow

   Only function infinite() { infinite(); } causes infinite recursion, leading to stack overflow error.

3. Final Answer:

   function infinite() { infinite(); } -> Option A

4. Quick Check:

   Infinite recursion = stack overflow [OK]

Hint: Infinite recursion without base case causes overflow [OK]

Common Mistakes:

• Assuming all recursive functions cause overflow
• Ignoring base case in recursion
• Confusing normal functions with recursive ones

3. What will be the output of this code?

function recurse(n) {
  if (n === 0) return 'Done';
  return recurse(n - 1);
}
console.log(recurse(3));

medium

A. 3

B. Stack overflow error

C. undefined

D. "Done"

Solution

1. Step 1: Trace the recursive calls

   recurse(3) calls recurse(2), then recurse(1), then recurse(0). At n=0, it returns 'Done'.

2. Step 2: Return values propagate back

   Each call returns the result of the next call, so finally recurse(3) returns 'Done'.

3. Final Answer:

   "Done" -> Option D

4. Quick Check:

   Base case stops recursion, returns 'Done' [OK]

Hint: Base case returns value, recursion unwinds safely [OK]

Common Mistakes:

• Expecting stack overflow without base case
• Thinking recursion returns input number
• Ignoring return propagation

4. Find the error in this recursive function that causes a stack overflow:

function factorial(n) {
  return n * factorial(n - 1);
}

medium

A. Wrong multiplication operator

B. Missing base case to stop recursion

C. Function name is incorrect

D. Should use addition instead of multiplication

Solution

1. Step 1: Check for base case in recursion

   The function calls itself without any condition to stop, so recursion never ends.

2. Step 2: Understand stack overflow cause

   Without a base case, calls pile up until memory runs out, causing stack overflow.

3. Final Answer:

   Missing base case to stop recursion -> Option B

4. Quick Check:

   Base case missing = infinite recursion [OK]

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

Common Mistakes:

• Assuming multiplication causes error
• Ignoring need for base case
• Thinking function name affects recursion

5. You want to safely calculate the sum of numbers from 1 to n using recursion without causing stack overflow. Which change should you make to this function?

function sum(n) {
  return n + sum(n - 1);
}

hard

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

B. Change + to * operator

C. Call sum(n + 1) instead

D. Remove the recursive call

Solution

1. Step 1: Identify missing base case

   The function calls itself with n-1 but never stops, causing overflow.

2. Step 2: Add base case to stop recursion

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

3. Step 3: Confirm safe recursion

   With base case, recursion ends properly and sum is calculated without overflow.

4. Final Answer:

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

5. Quick Check:

   Base case stops recursion safely [OK]

Hint: Base case prevents infinite recursion and overflow [OK]

Common Mistakes:

• Changing operator instead of adding base case
• Increasing n causing infinite recursion
• Removing recursion loses function purpose