Stack overflow concept in Javascript - Step-by-Step Execution

Concept Flow - Stack overflow concept

Function call starts

↓

Push call frame on stack

↓

Execute function body

↓

Function calls itself (recursion)

↓

Push new call frame on stack

↓

Repeat until stack limit reached

↓

Stack overflow error thrown

↓

Program crashes or stops

When a function keeps calling itself without stopping, each call adds a new frame to the stack. If this goes on too long, the stack runs out of space and causes a stack overflow error.

Execution Sample

Javascript

function recurse(n) {
  if (n === 0) return 0;
  return recurse(n - 1) + 1;
}
recurse(100000);

This code calls a function recursively many times until n reaches 0, but with a very large input it may cause a stack overflow.

Execution Table

Step	Call Depth (n)	Action	Stack Size	Result/Output
1	100000	Call recurse(100000)	1	No output yet
2	99999	Call recurse(99999)	2	No output yet
3	99998	Call recurse(99998)	3	No output yet
...	...	...	...	...
99999	1	Call recurse(1)	99999	No output yet
100000	0	Call recurse(0), base case reached	100000	Return 0
100001	1	Return from recurse(1)	99999	Return 1
100002	2	Return from recurse(2)	99998	Return 2
...	...	...	...	...
Stack limit reached	Too deep	Stack overflow error thrown	Stack max size	Program crashes

💡 Stack limit reached because too many recursive calls filled the call stack

Variable Tracker

Variable	Start	After 1	After 2	After 3	...	Final
n	100000	99999	99998	99997	...	0

Key Moments - 3 Insights

Why does the stack size keep increasing with each recursive call?

Each recursive call adds a new frame to the call stack to keep track of that call's variables and where to return. This is shown in the execution_table rows 1 to 100000 where stack size grows.

Why does the program crash instead of finishing?

Because the recursion is too deep, the stack runs out of space and throws a stack overflow error before reaching the base case, as shown in the last row of the execution_table.

What is the base case and why is it important?

The base case stops recursion by returning a value without calling itself again. Without it, recursion never ends and causes stack overflow. In the table, step 100000 shows the base case n=0.

Visual Quiz - 3 Questions

Look at the execution table, what is the stack size when n equals 99998?

A 99999

B 3

C 99998

D 100000

💡 Hint

Check the row where Call Depth (n) is 99998 and see the Stack Size column.

At which step does the base case occur in the execution table?

A Step 99999

B Step 1

C Step 100000

D Stack limit reached

💡 Hint

Look for the step where n equals 0 and the function returns 0.

If the base case was missing, what would happen to the stack size?

A It would keep increasing until stack overflow

B It would stay the same

C It would decrease over time

D It would immediately cause an error

💡 Hint

Refer to the concept flow and execution_table showing stack size growing with each recursive call.

Concept Snapshot

Stack overflow happens when too many function calls fill the call stack.
Each call adds a frame to the stack.
Recursive functions must have a base case to stop.
Without stopping, stack size grows until memory runs out.
This causes a stack overflow error and crashes the program.

Full Transcript

Stack overflow occurs when a program uses too much call stack memory by calling functions repeatedly without stopping. Each function call adds a frame to the stack to remember where to return and local variables. In recursion, if the base case is missing or too deep, the stack grows until it reaches its limit. Then the program throws a stack overflow error and crashes. The example code calls recurse with a large number, causing many recursive calls. The execution table shows stack size growing with each call until the base case is reached or the stack overflows. Understanding stack overflow helps write safe recursive functions with proper base cases.

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