Javascript is the most famous and at the same time most confusing language in the world. Most developers still find it difficult to understand its underlying beauty.

Whenever we write any javascript code, it's very normal to run into bugs, but when you know how things works behind the scene then it becomes quite easy to debug your code. So, let's understand what happens when any javascript code is run.

Javascript is a synchronous(specific order of execution), single-threaded(run one command at a time) language. It means javascript engine, only after finishing the current line of code, it will move on to the next line of code.

Execution Context

Everything in javascript happens inside an execution context. Consider this as a big container where all the javascript code is executed.

This execution context happens in two phases:

1. Memory creation phase: In this phase, javascript engine will go through whole code and allocate memory to all the variables and functions present in a global scope. 2.Code execution phase: In this phase, javascript engine executes code from top to bottom and one line at a time.

Now, let us understand both the phases with the help of a following snippet:

var n= 2;
function add(num){
  var result = num + num;
  return result;
}
var addNum = add(n);
var againAddNum = add(4);

When the above code runs, a global execution context is created, which is created in two phases: memory execution phase and code execution phase.

In first phase, it will reserve memory for all variables(n, addNum, againAddNum) and function(add). When reserving the memory for variables it reserves a special value undefined and for function, it stores whole code. The pictorial representation is shown below:

After allocating memory to all variables and function, code execution phase starts(code runs line by line).

Line 1: var n=2, 2 value is placed in n variable replacing undefined. Line 2-5: nothing to execute as function definition is there but it is not yet invoked. Line 6: add() function is invoked. In Javascript, function is a mini-program and whenever a new function is invoked, a whole new EXECUTION CONTEXT is created(inside the code execution phase).It also created into two phases, memory creation and code execution phase. Memory is allocated for variable and function(it involves function parameters and other variables).The pictorial representation of function execution context is shown below:

After allocating memory, the code execution phase comes here the code inside the function executes, and undefined is replaced by the actual value.

Line 4: When return is encountered, the control of the program is returned back to place where it was invoked i.e. control goes to line 6. Now, addNum value which was undefined earlier is replaced by the value of result and after that function execution context is deleted.

Line 7: Again same thing happens, function execution context is created and whole code is executed, againAddNum will be replaced by the value of result i.e. 8 and the execution context is deleted.

Once the whole javascript program is executed, the Global Execution Context will also gets deleted.

Now, the main question arises how javascript maintains and handles everything. The answer to this question is CALLSTACK.

CallStack

Execution context is maintained using a "Call Stack". A stack is a LIFO (last in first out) data structure. In a stack we only insert or delete elements at the top of stack, think in terms of JavaScript Array.push() and Array.pop() method.

CallStack maintains the order of execution of execution contexts.

There can be only one execution context running at a time, that's why JavaScript is a single threaded language.

CallStack also known by very fancy names, but they all are the same things.

1. CallStack
2. Execution Context Stack
3. Program Stack
4. Control Stack
5. Runtime Stack
6. Machine Stack

Summary

Whenever any javascript program is run, Global execution context is created which is created in two phases: Memory creation phase and code execution phase. For every function separate execution context is created and when that function completes its execution, execution context is deleted. When whole javascript program is executed, the global execution context is also deleted. The whole creation and deletion process of execution is maintained by CALLSTACK.

I hope you got some idea about the Temporal Dead Zone. Thanks for reading.

Happy Learning !!