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

I forgot to add the call to foo(); but other than that, this is the full context of it. I was just playing around with variable scopes and came across this. — CoryDorning
– CoryDorning, Commented Apr 21, 2010 at 18:10
never mind, it's already solved, I was suspecting something else. — Pekka
– Pekka, Commented Apr 21, 2010 at 18:12
You cannot have at the same scope level, two variables with the same name.. — Gabriele Petrioli
– Gabriele Petrioli, Commented Apr 21, 2010 at 18:16

Shaunwithanau · Accepted Answer · 2010-04-21 18:29:17Z

19

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

edited Apr 21, 2010 at 18:29

answered Apr 21, 2010 at 18:07

Shaunwithanau

5855 silver badges13 bronze badges

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

7 Comments

CoryDorning Over a year ago

Any other information as to why this is interpreted that way, considering the second example works without issue? It seems the same to me, only it has code following it...

Shaunwithanau Over a year ago

I wasn't quite sure why I got the downvote either. Either way, like the other answers that are appearing here, the reason is variable declarations in javascript are hoisted. This means that they are moved to the top of the closure.

Pekka Over a year ago

@Cory the second example has no var msg in it. The var makes it a local variable, and the twist is it makes it so even before the physical location of the var.

CoryDorning Over a year ago

@Shaun ah, gotcha! Thanks for the insight! Didn't know var's where hoisted. GREAT to know.

elias Over a year ago

@Shaun by the time i've read your post the "var msg;" wasn't there and so i looked like nonsense to me.

|

Daniel Vandersluis · Accepted Answer · 2010-04-21 18:17:12Z

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.

SilentGhost · Accepted Answer · 2010-04-21 18:11:25Z

2

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"

edited Apr 21, 2010 at 18:11

SilentGhost

322k67 gold badges312 silver badges294 bronze badges

answered Apr 21, 2010 at 18:10

David Murdoch

89.6k40 gold badges155 silver badges192 bronze badges

Comments

user166390 · Accepted Answer · 2010-04-21 18:35:05Z

1

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

answered Apr 21, 2010 at 18:35

user166390

Comments

Jaykumar Patel · Accepted Answer · 2014-04-09 04:36:47Z

1

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!

answered Apr 9, 2014 at 4:36

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

7 Comments

Comments

Comments

Comments

Check this `Demo jsFiddle`

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Check this Demo jsFiddle

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Check this `Demo jsFiddle`