JavaScript call stacks: an introduction

0

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?

A JavaScript call stack is an example of a stack data structure. In a JS call stack, the elements are function invocations. Each time you invoke a function, it is added to the stack. If it has a nested function, that nested function will also be added to the top of the stack, and so on. You can think of the call stack as a sort of to-do list for JavaScript.

More expert explainers from JuliaCreate a React and TypeScript Application – A Quick Guide

Stacks vs JS call stack

A JavaScript call stack is an example of a stack data structure. In a JS call stack, the elements are function invocations. Each time you invoke a function, it is added to the stack. If it has a nested function, that nested function will also be added to the top of the stack, and so on. You can think of the call stack as a to-do list for JavaScript.

It’s important to remember that JavaScript is largely a single-threaded process, which means that JavaScript processes one command at a time. Asynchronous actions are handled differently and I highly recommend this video if you want to know more about it.

Once you push all the functions that need to run in a given script up the stack in invocation order, JavaScript starts resolving them in top-to-bottom order, popping them out of the 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 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!

Make the Most of Embedded Software DevelopersWhat is the @ symbol in Python and how to use it?

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.

The JavaScript call stack, explained

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.

javascript call stack

Two functions calling each other will cause a stack overflow.

javascript call stack

As you can see the Chrome Developer Tool has error handling for this and will produce an error after 16000 frames (call stack items).

javascript call stack

The Beatles say hello and goodbye forever – no error handling needed.

boomunderground waving beatles GIF
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?

Share.

About Author

Comments are closed.