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.
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.
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.
After putting “printSquare” into the stack, it called the “square” function so we put the square into the stack.
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.
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.
Now we got the result of the return statement from the “square” function. So we remove it also from the stack.
Now after successfully executing the “square” function we have a statement to execute.
It prints the result of the “square” function assigned to the “squared” variable. Now our stack looks like this.
After execution of this “console.log” it will also be popped up from the stack leaving “printSquare(4)” & “main()” function alone :(.
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 :(.
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.
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?
Here we are calling foo() function which is again calling foo() function. Let’s take a look at what will happen to our stack.
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”.
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.