WittCode💻

JavaScript Stack Overflow Example

By

Learn what a stack overflow is and see an example of how it can be created with JavaScript. We will also go over what a stack and call stack are.

Table of Contents 📖

What is a Stack?

Before we learn what a stack overflow is, we need to know what a stack and a call stack are. A stack is a data structure that follows the Last In First Out (LIFO) principle. This means that elements are added and removed from the top of the stack only. In other words, elements can't be added or removed from anywhere except for the top of the stack. For example, in the image below, every time a new element is pushed onto the stack it is pushed on top and every time an element is popped from the stack it is removed from the top.

Image

This means that if we wanted to remove the bottom element from a stack, every element on top of it would have to be removed first.

What is a Call Stack?

A call stack is a stack that keeps track of functions that have been called in a program. The JavaScript interpreter uses the call stack to keep track of the program it is executing in the web browser. Specifically, when a script calls a function, that function is added to the top of the call stack. Functions that are called from within that function are then added to the top of the stack and so on. When the function is finished, it is removed from the top of the stack.

function firstFunction() {
  console.log('Pushing first');
  secondFunction();
  console.log('Popping first');
}

function secondFunction() {
  console.log('Pushing second');
  thirdFunction();
  console.log('Popping second');
}

function thirdFunction() {
  console.log('Pushing third');
  console.log('Popping third');
}

firstFunction();

The code above would give the following output.

Pushing first
Pushing second
Pushing third
Popping third
Popping second
Popping first

What is a Stack Overflow?

A stack overflow is an error that occurs when a program tries to push an item to a stack that is full. Call stacks often have a maximum size so we can't push onto them infinitely. The easiest way to create a stack overflow is to use recursion. Recursion is simply a function that calls itself.

let i = 0;
function recursiveFunction() {
  console.log(i);
  i++;
  recursiveFunction();
}

recursiveFunction();

Running this code gives output similar to the following.

...
8677
8678
8679
8680
8681
8682
VM4585:2 Uncaught RangeError: Maximum call stack size exceeded
    at recursive (<anonymous>:2:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)
    at recursive (<anonymous>:3:5)

Here we reached around 8682 recursive calls until the maximum call stack size was exceeded. This is because the recursive function was continuously added to the call stack for each invocation. Note that recursive functions don't automatically lead to a stack overflow. They should always have a terminating condition to prevent this from happening.

let i = 0;
function recursiveFunction() {
  console.log(i);
  i++;
  if (i === 1000) return;
  recursiveFunction();
}

recursiveFunction();

Here we simply stop the recursive calls once we reach 1000.

JavaScript Stack Overflow Example