javascript-local variable reference before assign

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?

This is because regardless of where you define your variable, it will hoist the variable to the top of their enclosing scope. Which means, if a variable is defined in a scope, javascript moves it all the way at the top of the scope. This is the same reason you can call a function in javascript on line 1 even though the function doesn’t get defined until line 2. As a result in second example, you lose access to the globalVariable defined outside the scope of the function, because it has been hoisted to the top of the scope (aka inside the function). — Wimanicesir
– Wimanicesir, Commented Oct 28, 2020 at 10:01

Greedo · Accepted Answer · 2020-10-28 10:13:44Z

2

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.

edited Oct 28, 2020 at 10:13

answered Oct 28, 2020 at 10:04

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TKoL Over a year ago

It's not really a compiler error -- if you have everything in your code except a(), it won't throw an error at all. You're fine to define your function with an uninitialized variable message, you just can't call that function without making it error.

tmdesigned · Accepted Answer · 2020-10-28 10:03:12Z

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, i.e. 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, i.e. = "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.

Collectives™ on Stack Overflow

javascript-local variable reference before assign

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related