Call stack and execution of javascript
When a javascript code is executed, An execution context is created in the call stack. The call stack is literally a stack of execution contexts.
If you add a break point to one of your functions and run it. You can see the call stack in the sources tab on your browser as shown in bellow image.
Lets talk about what is happening here.
So you see the sayHello function and you see the call stack, But you do not see the execution context.
Let me explain.
When a javascript code is executed an execution context is created in the callstack. And this execution context is an abstract concept of the environment which javascript is getting executed. In simple words the environment which sayHello function is executed is the execution context.
This execution process has two phases.
First phase is the memory allocation phase.
In this phase javascript runs through the code and allocates memory for any variable declarations and function declarations. for variables it allocates a memory location and assigns undefined. For functions it allocates memory and stores the whole function in it.
Second phase is the code execution phase
In this phase JavaScript runs through the code and run them line by line. Lets say in the first line it find a variable declaration x=1, which it already have allocated memory with undefined, now it assigns 1 to the variable x.
in this phase, once it finds a function. it brings the whole function from the memory where it stored it in the first phase. and start executing it. And since this is a function, javascript creates a whole new execution context for this. and this new execution context stacks on top of the first one. So until this is getting executed the fist execution context is on hold. Once the latest function returns the whole execution context is poped out of the call stack.
So this is the processes of javascript execution in short.
