How JavaScript engine execute this code?

#help #discuss #javascript

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";

According to me JavaScript Engine work as follow:

First Create global execution context
Define Global Scope , by searching for variable and function declaration. This is where hosting concept come in
Set the variable a = undefined, name = undefined and this = window object.
Put search variable and function in memory for reference.
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.

Top comments (6)

Uddesh • May 11 '19

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 • May 11 '19

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.