了解javascript提升和执行上下文

Question

b();
console.log(a);

var a = 'Hello World';

function b(){
    console.log('Called b!');
}

I have read about the term "hoisting", but it isn't pretty clear to me. Why does the function gets executed while the variable is set to undefined?

The interesting part is, the variable didn't show any error. But it showed undefined. But when I remove the variable totally, then it shows an error. That means, the variable is present somewhere though. right?

But if it is present, then why can't the compiler compile it and can compile the function here?

I know that var a is getting hoisted. I want to know why the engine is treating the variable and the function in a different way that is what's happening behind the scenes during the execution context.

Any detailed explanation would be helpful about how the engine is creating the execution context.

In this question I'm asking about how javascript engine is behaving differently with the function and the variable. And what is exactly happening in the creating state and execution state of the execution phase. So, it's not a duplicate question.

Answer 1

But if it is present, then why can't the compiler compile it and can compile the function here?

Basically it boils down to whether the value of the binding can be determined without executing the code or not.

The function declaration itself doesn't depend on runtime information. Keep in mind that the body is not evaluated until the function is called. So even without really executing the code, its clear that the value of b is a function.

However, the initialization value of a variable declaration may depend on runtime information. Consider this:

var a = 10 + bar();

There is no way for the engine to "hoist" the initialization value without evaluating the expression (and executing bar in the process).

Of course in your example, the initialization value ( 'Hello World' ) is static as well, so it could be hoisted. But then the behavior would be inconsistent and probably more confusing.

---

What exactly happens when control enters a new function is defined in the spec . There you can see how variable declarations and function declarations are treated.

Answer 2

With hoisting, this is what your code looks like

function b(){
    console.log('Called b!');
}
var a;

b();
console.log(a);

a = 'Hello World';

As you can see, a is declared at the the top, but has not been set to a value yet. That is why you get undefined when you log that variable.

If you remove the a variable altogether, you get the Uncaught ReferenceError because a has not been declared.

Answer 3

The above code is same as below

var a;
function b(){
    console.log('Called b!');
}
b();
console.log(a);

a = 'Hello World';

Explanation - Function along with its definition are hoisted to the top. Variable declaration is hoisted not its definition

Answer 4

var a; is hoisted. a = 'Hello World!'; is not hoisted. It's that simple.