How does JavaScript treats its functions and variable environment..?

Before starting it let's check out code snip.

var x = 1;
a();
console.log(x);

function a() {
  var x = 10;
  console.log(x);
}

you can actively participate and with me to understand the workflow of the program(assuming that you are having basic knowledge about how to write a function in html and JavaScript file and how to run that set of file.) and how things works behind the scene..
after running the code go to browser inspector and there you can check out the result in console tab and source tab.

now lets understand the flow step by step

Over here browser engine creates a execution context for the program. It has been pushed into the call stack and the control is at line 1
Before going further lets have a walk through on Execution context and call stack.
The execution context :
It is an internal JavaScript concept. Here JavaScript engine use to track the execution of code. The execution context is divided in two components

1. Memory Phase : In memory phase, javascript allocates memory to the variables and functions. For the variable, it allocates the keyword 'undefined' and for the functions, it allocates its function body itself as the memory
2. Code Execution Phase: In code execution phase javascript executes the program lines in order. This is what global execution context is.

The Call Stack :
The JavaScript Engine creates a stack data structure where function execution contexts are placed on creation — when the function is called or invoked. This data structure itself is called the Call Stack.

going further in our program the control is on line 1. Javascript allocated undefined to the variable 'X' and to the function a() it has allocated its function body.

after debugging line 2 we got to know that 'X' variable is considered as global variable and its value is 1.

Now let's put the debugger at line 6.

Here javascript creates new execution context for function a. This is been pushed to the call stack and then the control is now given to function which is at line number 5. As you can visualize we have a variable declared in function so a new local memory and global memory gets created and it will only considered for the function a.
let's check line no 7. here javascript looks for variable 'X' in local memory and allocates the value 10.

as you can notice that we have 1 more variable as 'X' in global scope

for examine we have to put the debugger at line 3

You can notice that in the call stack the execution context for function a() just got popped out and now the control is in line 3 back to the global execution context. Javascript ran the remaining program. It looked for variable 'X' in global memory and allocates the value '1' to variable 'X'. It now completed the global execution context in the call stack. And now the global execution context just got popped out of the stack. The call stack is now empty.

I Hope you find it useful and learned something new from it.