javascript - Why doesn't the outer scope variable get properly bound to the inner variable?

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;
}())();