When I started my career in JAVASCRIPT I used a variable before its declaration, for example

I thought it may throw a compilation error or runtime error like cannot use a variable before declaration or something like that, but none of it happened instead my a -variable got printed. I was amazed and decided to know what's happening under the hood of javascript execution. So I will share with you guys the information or knowledge that I have learned about javascript execution. So let's start, whenever you execute a javascript program a global execution context gets created which has two phases Creation phase or the Memory allocation phase and the Execution Phase.

Let's start creating a global execution context first and see what it contains when it gets created using a javascript visualizer.

So it comes with a window object and this keyword, about these two we will cover in the upcoming blogs. So now let's create a variable and a function and see what happens to these when we execute them in a js environment.

The above snippet shows you the creation phase. In the Memory allocation phase or creation phase, all the variables and functions were allocated some space in the memory, the variables will be assigned a special value undefined, and the functions will be copied as it is to the execution context i.e. if you see the above snippet you will find sayHello: fn() in the global execution context in the creation phase, in which fn() is nothing but the function you have written

function sayHello(){
  console.log("Hello!");
}

After the creation or memory allocation phase, execution phase will replace the creation phase. So let's see the execution phase using a javascript visualizer

Before discussing the above snippet I want to tell you something about the execution phase, the execution phase is a single-threaded process that means the execution of code goes to the next line once the current line execution is completed that's why javascript is called "synchronous single-threaded language" so what about asynchronous functions in javascript? don't worry we will cover this in the next coming blogs:). From the above snippet, you can find, in the execution phase the actual value is assigned to the str variable, and when the javascript engine finds this () it creates a separate execution context for that function and it also has the same two phases what the global execution context have. Once the execution of that function completes supposing in our case sayHello() function execution is completed the execution context created for sayHello() function is destroyed. So these are the behind-scenes of javascript execution and there is a lot more which I will cover in the next sections of my blog. So how my a variable got printed? when I started my program execution, the global execution context is created in which my a variable is allocated with some memory. whenever the execution phase finds my a variable it searches for it in the memory whether a variable has been allocated space or not once the memory is allocated it fetches my a variable value and it got printed.