Why doesn't the outer scope variable get prope

Question

(function(){
  var x = 23;
  return function(){
    var x = x;
    return x;
  }
}())();

Why does it return undefined instead of 23?

Shouldn't the var x = x; part be sufficiently unambiguous because the right hand side implicitly refers to the x in the outer scope?

Answer 1

The statement var x = x; doesn't see the variable x from the outer scope. The variable x inside the scope already exists before the assignment, and shadows the variable from the outer scope.

All variables in the scope are created before the code in the scope executes (hoisted), so it's the same as if you had:

(function(){
  var x;
  x = 23;
  return function(){
    var x;
    x = x;
    return x;
  }
}())();

---

It actually doesn't matter where in the scope you declare the variables. You can declare them last in the code (although that would be a bit confusing), and the code still works the same:

(function(){
  x = 23;
  return function(){
    x = x;
    return x;
    var x;
  }
  var x;
}())();

Answer 2

Shouldn't the var x = x; part be sufficiently unambiguous because the right hand side implicitly refers to the x in the outer scope?

No. All the scope of variables is determined before any assignments are performed.

Answer 3

Given:

(function(){
  var x = 23;
  return function(){
    var x = x;
    return x;
  }
}())();

The inner function only sees the inner x.

When entering an execution context, all declared variables are initialised, given the value undefined and placed on a kind of variable object before any code is executed (such as assignments). All outer variables are placed on a scope chain.

When resolving identifiers, the variable object is checked first, and only if not found there is the scope chain checked.

Answer 4

there is a concept called variable hoisting.. i.e in short, just before executing the function, all variables that are declared inside function will be marked undefined. so it returns undefined.. Because of variable hoisting, you can define variable later but can use it before.. eg. function(){alert(x);var x;} will alert undefined but where as function(){alert(x);} throws error..