nested function losing variable reference

Question

In the following code:

function outer() {
  var x = 'foo';

  function inner() {
    var y = x;     // y == 'foo'
    var x = 'bar'; // x == 'bar', y == undefined
  }
}

Why does the variable y become undefined within inner()? shouldn't it refer to x in outer()?

If the line var x = 'bar'; is removed then y does indeed have the value 'foo'.

It's called hoisting. – Denys Séguret Apr 27 '16 at 15:58 — Denys Séguret, Apr 27 '16 at 15:58

Pointy · Accepted Answer · 2016-04-27T16:21:35.700

The inner function is interpreted as if it were written like this:

  function inner() {
    var y;
    var x;
    y = x;     // y == undefined
    x = 'bar'; // x == 'bar'
  }

The declarations are hoisted, but the initializations are processed top to bottom. Thus, throughout the entire inner function, the symbols x and y both refer to the variables declared locally in that function; in particular x is the local x, not the one in the enclosing context. When the initializer expression for y is evaluated, therefore, x is the local x, which has not yet been initialized; its initializer expression comes after the initializer for y.

Downvoter, let me know if there's something I can explain in more detail. — Pointy, Apr 27 '16 at 16:30

nested function losing variable reference

1 Answers1