分配前的 javascript 局部变量引用

Question

I'm learning Javascript recently.When I get into the scope chain section, the example code as following:

 var message = "in global"; console.log("global: message = " + message); var a = function() { var message = "inside a"; console.log("a: message = " + message); function b() { console.log("b: message = " + message); } b(); } a();

Because of curiosity, I reverse the order of line 4 and line 5, as following:

 var message = "in global"; console.log("global: message = " + message); var a = function() { console.log("a: message = " + message); /*order reverse*/ var message = "inside a"; /*order reverse*/ function b() { console.log("b: message = " + message); } b(); } a();

I suppose the second line of output should be a: message = in global instead of a: message = undefined . So why does this happen?

Answer 1

It is because Javascript will move all the variable declaration on the top of the block. It means that your code is equivalent to this:

 var message = "in global"; console.log("global: message = " + message); var a = function() { var message; console.log("a: message = " + message); /*order reverse*/ message = "inside a"; /*order reverse*/ function b() { console.log("b: message = " + message); } b(); } a();

This issue can be avoided by using let :

 var message = "in global"; console.log("global: message = " + message); var a = function() { console.log("a: message = " + message); /*order reverse*/ let message = "inside a"; /*order reverse*/ function b() { console.log("b: message = " + message); } b(); } a();

As you can see let won't be hoisted to the top of the block, hence throwing a compiler runtime error.

Answer 2

When JavaScript compiles right before your code run, it basically makes 2 passes over your code.

First it goes through and looks at the "left hand" of the assignments, ie var message . All of these are hoisted, which means they are virtually moved to the top of their scope, in your case the function.

Then it goes through and executes your code, and this time looks at the "right hand" side of assignments, ie = "inside a" .

Because of that, when it does your console.log , it already knows about the a you have created inside of the function . Since this shadows the global a variable, the current value is "undefined" since it has not been set to "inside a" yet by the time you are doing your console log.

It's naturally confusing, which is why shadowing is discouraged.