What does Stack Overflow mean in Programming?
By: Toluwani Elemosho
Tags: Software Development, Computer Science, Frontend Development, Programming, Backend Development

What does Stack Overflow mean in Programming?

Find out the true meaning of stack overflow

screenshot from stackoverflow edited by Toluwani Elemosho

What comes to mind when you think of stack overflow? The website, huh? Well, follow me as I explain to you the true meaning of stack overflow.

At the end of the day, the JavaScript program does two things: write information to the memory and read information from the memory.

Two memory regions are used to read or write these information:

Heap Stack

image by via tidyboks (right) and Modern Teaching Aids(left)

What is a Stack?

Think of stack as a memory region that tracks and stores functions or variables when running line by line.

Stack operates in a LIFO (last in, first out) mode. Imagine the Lego stacked one above the other, vertically from top to bottom, with more Lego applied to the top and removed from the bottom.

Images by Amman Vedi via https://dribbble.com/

How to add to Stack?

This idea of adding to the stack is illustrated in the code diagram below. Whenever calculate() function is called in line 8, calculate() is pushed to the topmost block of the stack. Next const sumTotal = (4+5) in line 5 will be executed and will also be pushed to the stack. As more codes run, they are pushed to the stack.

How to subtract from stack?

When a function, variable or object is executed, it is cleared from the stack. In the example above, since const sumTotal = (4+5) completed its task before calculate() function, it is removed from the stack.

Consider another example:

Consider the steps in the above code diagram:

Calculate() function invoked in line 12 is pushed to the first level of the stack. (4+5) in line 8 runs next and is also pushed to the stack at the top of calculate() function, but was quickly removed from the stack because it had completed its task. The next function to be executed, subTractTwo() was added to the stack. (return num-2) has been processed in the subTractTwo() , then added, but removed immediately because it has completed its task. Now that subTractTwo() has already completed its process, it is removed from the stack. Lastly, calculate() ended the execution and removed from the stack.

To sum up, stack is a container that tracks and stores data as each line of code executes.

What is Stack overflow?

It is possible to keep adding and adding to the container(stack) without releasing the memory, as the size of the stack is limited, it will eventually run out of memory and crash the program.

image by Improv Utopia

Let’s do something fun, okay?From the previous examples, we found that when calculate() is called, the code is placed on and removed from the stack.

What if we keep increasing the stack until it gets bigger and bigger, it will finally run out of memory(stack). This is called stack overflow.

The code above indicates a function invoked within itself. This is called Recursion. What happens if we call recurse() on line 6? recurse() will continue to call recurse() and and keep adding recurse() to the stack until the stack is filled and the application crashes. This is called stack overflow.

Recursion is one of the most common ways to cause a stack overflow. It is simply a function invoked within itself to create a stack that keeps growing and growing until the stack is filled.

Conclusion

In summary, this article explains the two memories that the JavaScript V8 engine uses to store and read information: Stack and Heap. It also describes what the stack is, how information is added or removed from stack, and finally what stack overflow really is.

I hope you had fun learning about these concepts as they help you write better JavaScript code.