Node: Call Stack Explained

Prateek Singh
Feb 1 · 5 min read
Credits: JS Conference

About one year ago, I was a Senior JavaScript developer as my portfolio stated. But in a lonely time when I ask my self how JavaScript works or what is JavaScript. I wasn’t entirely sure. I heard V8 as a term, something Chrome’s run time didn’t really know what that means When I ask my developers friends they give definitions using words like single-threaded, callbacks, etc. When I ask google for the same it says, “JavaScript is a single-threaded non-blocking asynchronous concurrent language 😞”. What? These big words confused me so I googled some more, then it says “JavaScript has a call stack, an event loop, a callback queue, and some other APIs stuff 😞”. After reading these things I removed “Senior” from my profile and became just JavaScript developer 😞. After one year of study and research, I think I get this now, which I want to share with you. As our tinny mind is not able to get everything in one article we are going to cover this in parts. In this part, I am going to explain the “Call Stack” keyword.

What is Call Stack?

The call stack is a Last-In, First-Out (return goes back to the point of the most recent call) data structure containing the address at which execution will resume and often local variables and parameters from each call. Let’s understand the call stack by a simple example.

Credits: JS Conference

When we step into a function, we put something on to the stack, if we return from a function, we pop off the top of the stack that’s all the stack can do. Let’s run this code line by line and check how it exactly works.

Step 1

If you run this file, there’s kind of the main function, right, like the file itself, so, we push that on to the stack. Then we have some function definitions, they’re just like defining the state of the world, and finally, we got to print square, right, so the print square is a function call, so we push “printSquare” on to the stack.

Credits: JS Conference

Step 2

After putting “printSquare” into the stack, it called the “square” function so we put the square into the stack.

Credits: JS Conference

Step 3

Again “square” function called “multiply”, So we put that also into the stack. We are not popping anything from the stack because till now there is nothing returned, One function is calling another function as a return statement and stack is getting filled.

Credits: JS Conference

Step 4

After all these function callings, now we got a return statement.

return a * b;

So we popped up the stack and remove “multiply” from the stack.

Credits: JS Conference

Step 5

Now we got the result of the return statement from the “square” function. So we remove it also from the stack.

Credits: JS Conference

Step 6

Now after successfully executing the “square” function we have a statement to execute.

console.log(squared);

It prints the result of the “square” function assigned to the “squared” variable. Now our stack looks like this.

Credits: JS Conference

Step 7

After execution of this “console.log” it will also be popped up from the stack leaving “printSquare(4)” & “main()” function alone :(.

Credits: JS Conference

Step 7

Now finally after completing all the rituals and steps of the program “printSquare(4)” will be popped up from the stack and then “main()” function. Now again our stack is empty and alone :(.

Credits: JS Conference

What is Stack trace?

Did you ever try to understand the error logs shown in the browser console? Sometimes we ignore it not depends on our custom logs but if we look carefully into it, they are very helpful to tell from where the error originates and what are the consequences of the error. Let’s see this example.

Credits: JS Conference

Here baz() is calling a function bar(), bar() is calling a function foo() & our dear foo() throwing error. Now if we look into the logs of browser it is giving us a well understanding of the error and how it originates. That's what we call “Stack Trace”.

What is Stack Overflow?

No, we are talking about the famous stackoverflow.com website but a term generally used in the v8 engine and JavaScript. TO understand when and why stack overflow occurs. Take a look at the next image.

Credits: JS Conference

Here we are calling foo() function which is again calling foo() function. Let’s take a look at what will happen to our stack.

Credits: JS Conference

After sometimes, our Chrome says “well we are not expecting you to call the same function 16K times so we are upset from you and that's why I am giving error”.

Credits: JS Conference

So that's how to call stack works. In the upcoming articles, we are going to cover event loop, callback queue, working of V8 Engine and how NodeJS works on the V8 engine.

Thanks for reading || Write to Learn.

JavaScript in Plain English

Prateek Singh

Written by

Talk is Cheap… SHOW ME THE CODE.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

More from JavaScript in Plain English

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade