I happen to know pancake stacks intimately – short stacks, high stacks, all stacks. Pancakes are therefore naturally the first thing that comes to mind when I hear “stacking”. Fortunately, this is an apt visual metaphor for a software stack.
What is a stack?
Software stacks are an array-like data type that behave like a collection of elements. In this visual example, each pancake represents an item, which we added to the top of the stack; we can only delete each element from the top. Because of this linear structure, stacks are also referred to as LIFOs or last in, first out.
Stacks have two main operations: push and pop. If you are familiar with paintings, you’ll be happy to know that these methods are exactly what you think: push adds an item to the top of the stack, and pop removes the most recently added item from the top. Unlike an array (or a stack of pancakes), it is not possible to access an element from the bottom or the middle without first deleting those above.
What is a JS call stack?
Stacks vs JS call stack
In this video you can see that the function
printSquare is invoked at the bottom of the screen. The
printSquare the function is added to the call stack, but it cannot be resolved until it receives the return from its called nested function
square. The square function is now added to the call stack, but it cannot be resolved until it receives the return from his nested function called
multiply The function is pushed to the top of the stack, and since it has a return statement that can be returned immediately, it continues and terminates and is removed from the top of the stack. The call stack continues in this manner, disabling functions in the reverse order of the order in which they were called.
Doing research for this article was a bit like managing my own call stack. When I started a line of research, it inevitably raised a nested question, which I needed to add to the top of my own “to do” list to figure out before continuing; While researching this second question, I came across another topic which I added to the top of my list before continuing with the previous topic, and so on, multiple times. Solving the most recent question I added allowed me to remove it from the top of the list and continue with the next question below until I was at level one, ready to write this blog!
How to practice with batteries
The Chrome browser has a very robust developer tools panel. One of the things you can do with the panel is browse the code line by line and watch it grow on the stack. To open it, right-click (or type
Cmd + option + j) on any web page in Chrome, choose the Inspect option and the Sources tab at the top. I made a small video with a stack call demonstration using the breakpoint and stepper tools.
I add the breakpoint to the
aDayInTheLife function invocation, which breaks the code and allows us to cascade through each function. As you can see, functions are added to the stack from bottom to top and then resolved from top to bottom as the functions receive their return values and are resolved. In the end, the string “Made the bus in seconds flat” is returned to the original
aDayInTheLife function and returned to the console at the very end once the stack is cleared.
What is stack overflow?
The basic principle is that computer memory is finite, and if there are more items pushed onto the stack than there is space, the stack will overflow. The most common cause of a stack overflow situation is infinite or very deep recursion. A recursive function is one that calls itself – or imagine two functions that call each other. The first function adds the second function to the call stack, the second function adds the first function to the call stack, and so on. Since nothing is ever returned or resolved, the stack will overflow.
Two functions calling each other will cause a stack overflow.
As you can see the Chrome Developer Tool has error handling for this and will produce an error after 16000 frames (call stack items).
The Beatles say hello and goodbye forever – no error handling needed.
I’ll leave you with a fun fact: Stack Overflow, the website, takes its name from a 2008 Coding Horror survey deployed by creators who were looking for help naming their website. Some of the other options were humbledeveloper.com and writeoncereadmany.com. 25% of the nearly 7,000 votes went to stackoverflow.com, making it the winner, and I for one think they picked the best.
So… who’s hungry?