confusion of javascript closure

Question

I have been proved I do not truly understand javascript closure, and I am being confused by the following codes. I thought fxn would access the outside foo, but it actually print out "underfined". Why??

var foo = "hello";
function fxn(){
   alert(foo);
   var foo = "test"
}

fxn();

Cannot reproduce. It will log _undefined_ but alert `hello` – Paul S. Feb 10 '14 at 12:27 — Paul S., Feb 10 '14 at 12:27

Moritz Roessler · Accepted Answer · 2014-02-10T19:01:54.823

This is because in JavaScript, variables get hoisted, which means

Variables are initialised to undefined when created. A variable with an Initialiser is assigned the value of its AssignmentExpression when the VariableStatement is executed, not when the variable is created._{(ES5 §12.2)}

Thus, semantically, your code would be equivalent, to the following...

var foo = "hello";
function fxn(){
   var foo; //Variables are initialised to undefined when created
   alert(foo);
   foo = "test"; //A variable with an *Initialiser* is assigned the value of its *AssignmentExpression* when the *VariableStatement* is **executed**
}

fxn();

R3tep · Answer 2 · 2014-02-10T13:52:03.730

1

You define your variable foo outside your function. If you repeat calls for var, you redefine the variable inside the function and it loses its allocation.

Remove var in the function to access foo into the function fnx.

var foo = "hello";
function fxn(){
   alert(foo);
   foo = "test";
}

fxn();

Jsfiddle

edited Feb 10 '14 at 13:52

answered Feb 10 '14 at 12:42

R3tep

12,512
10
48
75

could you explain it a bit more? – Daniel Shen Feb 10 '14 at 12:53
1

You define your variable "foo" outside your function. If you repeat calls for "var", you redefine the variable inside the function and it loses its allocation. – R3tep Feb 10 '14 at 12:58
I would add to R3tep: 1) redefining the in method hides the external definition, but ... 2) you are using a variable before it is defined => 'undefined' (see also C5H8NNaO4 answer) – Hezi Feb 10 '14 at 13:02
@Hezi For me `foo` is a global variable on this example ([link](http://stackoverflow.com/questions/944273/how-to-declare-a-global-variable-in-a-js-file)). So the variable is defined and after `alert()` is updated. – R3tep Feb 10 '14 at 13:07
@R3tep Correct. But in the original question, the variable was redefined using 'var'. – Hezi Feb 10 '14 at 13:13
@Hezi _I thought fxn would access the outside foo, but it actually print out "underfined"_ Redefined using 'var' is an error for me in this question – R3tep Feb 10 '14 at 13:20

confusion of javascript closure

2 Answers2