And I thought I understood scope...

Question

Can someone please tell me why the last logging of 'x' equals 0 and not 1. I thought because it's declared outside of a function it has global scope and then in the function it's value is set to 1 and that value would remain as it's a global? I know the first 'x' value inside the function is a global as any variable declared without the var keyword becomes a property of the window object. Many thanks

var x = 0; //global variable

function y(){
  x = 1;
  log("1. %n ", x);//1. 1

  var x = 2;
  log("2. %n ", x);//2. 2
}

y();
log("3. %n ", x);//3. 0

Answer 1

I think, but cannot confirm via the ecmascript spec, that the "var x = 2" line is scanned at function definition time, and the local scope of "x" applies for the entire function, not just after the "var x" line's position in the function.

Here's a simpler test case (tested via jsdb):

js>x = 0;
0
js>function foo(k) { x=k; }
js>function bar(k) { var x=k; }
js>function baz(k) { x=k; var x=2; }
js>foo(1)
js>x
1
js>bar(2)
js>x
1
js>baz(3)
js>x
1

You'll note that the only function here that affects the global "x" is foo(). The function bar() obviously affects only a local x. But the function baz() affects only the local x as well. You would think that the assignment x=k; would affect the global x, since it happens "before" the next statement var x = 2; which is clearly affecting a local variable x. But I'm pretty sure that if you do var x in a function, the interpreter sees it and applies it to all uses of x in that scope. Same situation as yours.

Answer 2

The variable x inside the function is created immediately when the function is executed and not just when the line with the variable statement is reached:

If the variable statement occurs inside a FunctionDeclaration, the variables are defined with function-local scope in that function […]. Variables are created when the execution scope is entered. […] Variables are initialised to undefined when created. […]

You can see that x is initially undefined when adding a log call in front of the first assignment:

function y(){
  log("0. " + x);//0. undefined
  x = 1;
  log("1. " + x);//1. 1
  var x = 2;
  log("2. " + x);//2. 2
}

That means both assignments inside the function refer to x in the function-local scope and not to x in the global scope.

Answer 3

The var statement is subject of hoisting, when your code is evaluated it actually looks like this:

var x = 0; //global variable
function y(){
  var x; // local!!

  x = 1;
  log("1. %n ", x);//1. 1

  x = 2;
  log("2. %n ", x);//2. 2
}

y();
log("3. %n ", x);//3. 0

Just before y is executed, a new execution context is setup, and the Variable Instantiation process takes place before the function is executed.

That's one of the reasons about why JSLint recommends only one var statement per function, to resemble what is actually happening.