The most frequently asked questions in Javascript Interviews are basically from some core topics of Javascript, which are Call Stack, Scope Chain, Multi-Paradigm, Single Thread , Hoisting, Prototype-based Object Oriented and 'this' -keyword.

Let's discuss Call Stack in Javascript today.

Before we understand the Call stack, we must first understand the Execution Context.

Let's start with a question, How is JavaScript code executed?

In the JS engine, we suppose our code was just finished compiling. So, the code is now ready to execute, then a global execution context is created for the top level of code(code that is not inside any function). In the beginning, only the code that is outside of functions will be executed. Functions should only be executed when they are called.

---

Execution Context is basically an environment in which a piece of Javascript is executed and stores all necessary information for some code to be executed.

JavaScript code always runs inside an execution context. In any JavaScript project, no matter how large it is, there is only one global execution context. It's always there as the default context, and it's where top-level code will execute.

Once the top-level of code is finished execution, functions finally start to execute as well. For each and every function call a new execution context will be created containing all the information that is necessary to run exactly that function, then same goes for methods because they're simply functions attached to objects.

Now, when all functions are done executing, the engine will basically keep waiting for callback functions to arrive so that it can execute these. For example, a callback function is associated with a click event. And that it's the event loop who provides these new callback functions.

'' If you don't understand the last part about callback function and event loop then keep following my article, will post an in-depth article on event loop later.''

So, coming back to the point, we know now what an execution context is, but don't really know what it's made of. So, what's inside of it?

The first thing that's inside any execution context is a so-called Variable environment. In this environment, all our variables and function declarations are stored, and there is also a special arguments object. This object contains, as the name says all the arguments that were passed into the function that the current execution context belongs. Because each function gets its own execution context as soon as the function is called. So basically all the variables that are declared inside a function, will end up in its variable environment.

However, a function can also access variables outside of the function. And this works because of the Scope chain. (If you want to know details about Scope and Scope chain please follow my upcoming articles) . it is stored in each execution context.

And Finally, each context also gets a special variable called 'this' keyword(details? ...follow my upcoming articles).

Now, the content of the execution context, so Variable environment, Scope chain and this keyword is generated in a so-called creation phase. Which happens right before execution.

In large projects, it is difficult to maintain for the engine to keep track of exactly where the execution running. So, that's where the Call stack finally came into the picture. And Call stack together with the memory heap makes up the Javascript engine itself.

But, what's the Call Stack actually?

---

Call Stack is basically a place where execution contexts get stacked on top of each other, in order to keep track of where we are in the program's execution.

The execution context that is on top of the stack is the one that is currently running. When it's finished running, it will be removed from the stack and execution will go back to the previous execution context.

Let's assume, there is a simple variable declaration and then the first and the second **functions are declared. So nothing new here, but that's just how normal top-level code gets executed. But then, in the last line here, we declare the 'x**' variable, with the value that is gonna be returned from calling the first function.

And so, after a function call, it immediately gets its own execution context ( first ()). Then run the code inside the function body and put the call stack top of the current context.

Then if we proceed with the code then, in that first function body a simple variable here, and this variable will course be defined in the variable environment of the current execution context, not the global execution context. So, after the variable declaration another function call there, So, Let's call the function and move there. Then again a new execution context will be created. Once more, it is pushed onto the call stack and becomes the new act of context. Now what's important to note here is that the execution of the first function has now been paused.

The first function stopped at this point where the second function was called and will only continue as soon as this second function returns. It has to work this way because remember, JavaScript has only one thread( Single Thread) of execution. And so it can only do one thing at a time. Now, moving to the next line, we have a return statement meaning that the function will finish its execution. It means that the function's execution context will be popped off the stack and disappear from the computer's memory.

Now that the previous execution context will now be back to being the active execution context again So, let's also go back to where we were before in the code. where we have this calculation, and then finally this first function also returns, and here the same as before happens. So the current execution context gets popped off the stack and the previous context is now the current context where code is executed. In this case, we're back to the global execution context.

So here, the return value is finally assigned to 'x' and the execution is finished. Now the program will now actually stay in this state for forever until it is eventually really finished. And that only happens when we close the browser tab or the browser window.

And this is in a nutshell how the call stack works.

Javascript code runs inside the call stack and actually it is more accurate to say that code runs inside of execution contexts that are in the stack.