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

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 a开发者_Python百科nd 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

---

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

---

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.

---

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"

---

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

---

You can completely control the execution of java script functions and pass variables as a argument,

Here in this case function inside you can not access outside variable. but if you want to use you pass variable argument to access that value inside function.

var msg = 'outside';

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

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

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

Check this Demo jsFiddle

And inside another variable g you define is a 'private' variables (with in a function scope) so its alert "inside" value within function. Hope this help you!