How JavaScript engine execute this code?

I'm trying to write a post on execution context in JavaScript.But I'm not able to understand creation phase of execution stack when code is compile, how code is organized in compile code.For example

   console.log(a); //log 'undefined' why?
   logName();

   function logName(){
       console.log(name); //log 'undefined'
   }

   var a = 10;
   var name = "CoderOO7";

js

According to me JavaScript Engine work as follow:

1. First Create global execution context
2. Define Global Scope , by searching for variable and function declaration. This is where hosting concept come in
3. Set the variable a = undefined, name = undefined and this = window object.
4. Put search variable and function in memory for reference.
5. When function logName() invoke , create its execution context and then set its local scope and value of this.

the whole picture can be depict as:

<global execution context>
    a : undefined
    name : undefined
    logName : <refrence to function in memory>
    ScopeChain : 
    this : <window object>

    <function execution context of logName>
    ScopeChain:
    this : <window object>

Now when compilation phase is done then than JavaScript engine execute code and assign the values to variable.

now the picture look like this

<global execution context>
    a : 10
    name : 'CoderOO7'
    logName : <refrence to function in memory>
    ScopeChain : 
    this : <window object>

    <function execution context of logName>
    ScopeChain:
    this : <window object>

Somebody help to clear my confussion because I know what I'm thinking is totally wrong.

Comments

[Uddesh]

Hey Shubham, Hoisting doesn't work like this. We can't just declare the variable and assign where we want in our code there are some rules for this.

1) Only declaration will hoist not the assignment.

2) No executable logics like functions will hoist.

So if you write

a = 10;
console.log(a);  // 10
var a;

The output will be '10'

Why?

because javascript engine hoist declaration of the variable a and put it on the top then it will hit the declaration part a = 10; then console.log(a) will be executed. so eventually the javascript engine will take it like this.

var a;
a = 10;
console.log(a)  // 10

In your code, you are trying to access a and name before the declaration and that's totally fine but you have to assign the variable before you call them.

I hope it makes sense. Let me know if you have more queries.

[Shubham]

Well thanks for your reply. I understand hoisting concept but what I'm not able to understand what happen when JavaScript engine compile the code.

console.log(a); log 'undefined'
var a=10;

According to you var a hoist to top but what I actually understand is that when JS engine compile the code it set the var 'a' to top and set it to undefined and at time of execution assignment operation is done.
That's why log is undefined for var 'a' but when JS engine read a=10 then it assign the value 10 to var a.

[Uddesh]

Yes exactly, each and every variable assigned undefined unless you assign some value to it that's why console.log(a) says undefined.

[Said Furkan Dize]

Hey,

Check out the "use strict".
It's throw an error when you try to declare an variable without "var", "const" or "let"

[Uddesh]

That's a different case.

[Said Furkan Dize]

No man. You gived an example on your vomment. That's why i wrote that comment.
When you use strict you cant declare an variable like: "a: 10"