Yes indeed !. A lot of times we have heard that call stack in JS has this function, runs this way, now will execute this , etc. but what actually is a call stack ? Let’s understand it - the simple way! A call stack (in formal definition) is a way for the javascript interpreter to know where it is in the script. What this means is, if your code contains 2 functions per se , and those functions are placed one inside the other, how would my interpreter know where the execution is currently taking place?. To illustrate this, let us see the example:
Line #1 function one() {
Line #2 console.log("beginning of function one");
Line #3 two();
Line #4 console.log("ending of function one");
}
Line #5 function two(){
Line #6 console.log("inside function two");
}
Line #7 one();
The code should give the following output:
beginning of function one
inside function two
ending of function one
We know that because we understand how functions work and how they execute but how does the Javascript interpreter know which line should be executed after which line?. This is when the idea of a call stack comes into picture. For us, the code above works like this:
- Step 1-> one() function is called at line #7
- Step 2 -> execution goes to line #1 and then line #2 is executed
- Step 3 -> next , line #3 executes and this calls function two(). Now the execution goes to line #5 because function two is called.
- Step 4-> line#6 executes because it is the body of function two and then since the function ends, the execution goes to line #4 and function one ends.
This is how we would understand how the execution goes on and hence the output is justified. But how does the interpreter understand the flow of the code? It does so with the help of a call stack. Let us see now how it works. Please pay attention to each step so that it becomes easier to understand.
We are taking the same example as above. I would denote the top of stack with an arrow -> and it would work in the same way as a stack data structure works.
- The stack is currently holding the global execution context ( more about it in another article). CALL STACK -> global execution context
- Interpreter ignores everything until line #7 where the function one() is called. Function one() is pushed on to the stack. CALL STACK -> one() Global execution context
- All the lines of function one() are executed until it finds another function call at line #3 and pushes function two() on the stack: CALL STACK ->two() one() Global execution context
- Every line of two() gets executed and then the function two() comes to an end , hence it is popped off the call stack. CALL STACK -> one() Global execution context
- The top of the stack is again pointing to one() and the execution continues where it left i,e from the line #4. Now since this was the end of our function one(), it also gets popped off the stack. CALL STACK -> global execution context
- The stack finally becomes empty now.
This is how the call stack works in simple words. Hope this article was a bit insightful and helped you understand the concept of call stack in JS. Through these articles, I aim at explaining hard concepts in JS in an easy manner and in simple words. If you liked this, you might want to check out more advanced concepts in JS here .