Global JavaScript Variable Scope: Why doesn't this work?

Question

So I'm playing around with JavaScript and came across what I think to be an oddity. Is anyone able to explain the following? (i've included the alerted values as comments)

Why is the first alert(msg) inside foo() returning undefined and not outside?

var msg = 'outside';

function foo() {
  alert(msg); // undefined

  var msg = 'inside';
  alert(msg); // inside
}

foo();    
alert(msg); // outside

Considering these both work fine:

var msg = 'outside';

function foo() {
  alert(msg); // outside
}

alert(msg); // outside

and:

var msg = 'outside';

function foo() {
  var msg = 'inside';
  alert(msg); // inside
}

alert(msg); // outside

Answer 1

What is happening in your first example is the declaration and initlization of msg are being split with the declaration being hoisted to the top of the closure.

var msg; //declaration
msg = "inside" //initialization

Therefore the code you wrote is the same thing as

var msg = 'outside';

function foo() {
var msg;  
alert(msg); // undefined
msg = 'inside';
alert(msg); // inside
}

The second example is not the same. In your second example you have not declared a local variable msg so alert(msg) refers to the global msg. Here is some further reading on: Hoisting

Answer 2

Variable declarations inside a Javascript closure take place first, regardless of where they are located within the the closure. So in your first example, a local variables msg exists at the start of the function (because it is declared within the function) but a value is not assigned to it until after the first alert, so for that first alert, msg is undefined.

Your first example is equivalent to:

var msg = 'outside';

function foo() {
  var msg;
  alert(msg); // undefined

  msg = 'inside';
  alert(msg); // inside
}

alert(msg); // outside

In the second example, you don't explicitly declare msg within the function. Since there is already a global variable with the same name, the global is used instead of a local being defined.

In the third example, you explicitly declare the variable and assign it a value before trying to use it, so when you alert(msg), the local, defined variable is alerted.

Answer 3

from http://www.irt.org/script/1321.htm:

If we declare but not initalise a variable with the var keyword inside a function it should be local in scope, but undefined across the complete function until the point at which it is [initialized]...

this will work for you:

var msg = 'outside';

function foo() {
  alert(window.msg); // outside

  var msg = 'inside';
  alert(msg); // inside
}

alert(msg); // outside
foo();
alert(msg); // still "outside"

Answer 4

var is not a declaration. It is a confusion that mixes up many people. Rather, var is a scope-wide annotation. The placement of 'var' inside a scope does not matter.

var in JavaScript is an Annotation, not Statement