JavaScript variable scoping not expecting result

Question

Whats happening to bar on the second console.log? Shouldn't it be "Andy" or throw a Reference Error? Also, why is foo not undefined?

Using Chrome.

// lexical scope example
var bar = "Andy";
try {
    console.log(bar); // Andy
    (function() {
        console.log(bar); // undefined!
        var bar = "B",
            foo = "Last Name";
        console.log(bar); // B
        console.log(foo); // Last Name
    })();
    console.log(bar); // B
    console.log(foo); // Reference Error
} catch (e) {
    console.log(e);
}

JSFiddle of the above: http://jsfiddle.net/2D9fj/3/

Related to http://stackoverflow.com/questions/1552941/variables-in-anonymous-functions-can-someone-explain-the-following? — j08691, May 17 '12 at 15:43

score 1 · Answer 1 · answered May 17 '12 at 15:43

The var declarations are hoisted, after being parsed your code looks like, (this is why a lot of developers define their vars all at the top)

// lexical scope example
var bar = "Andy";
try {
    console.log(bar); // Andy
    (function() {
         var bar, foo;
        console.log(bar); // undefined!
        bar = "B";
        foo = "Last Name";
        console.log(bar); // B
        console.log(foo); // Last Name
    })();
    console.log(bar); // B
    console.log(foo); // Reference Error
} catch (e) {
    console.log(e);
}

score 0 · Answer 2 · answered May 17 '12 at 15:42

0

The line starting with (function() { creates a scope/closure that encloses bar, foo vars whose values are not valid outside scope/closure

answered May 17 '12 at 15:42

rt2800

3,045
2
19
26

score 0 · Answer 3 · answered May 18 '12 at 12:47

Andrew's answer is correct, but I think it would be useful to provide an example that just illustrates the hoisting concept, without the additional code.

// this: 
function foo() {
    console.log(x);
    var x = 1;
}

//is actually interpreted like this:
function foo() {
    var x;
    console.log(x);// undefined
    x = 1;
}

Also, closure is related to this issue, but only so much as it makes it harder to identify hoisting errors.

(function parent() {
  // x declared and assigned in parent scope
  var x = 2;

  function foo() {
      console.log(x); // 2 (closed around parent scope)
  }

  function bar() {
      console.log(x); // undefined (bar scope, x declaration is hoisted, but not defined yet)
      var x = 1;
  }
  function baz() {
      var x = 3;
      console.log(x); // 3 (baz scope, defined)
  }
  //run 
  foo();
  bar();
  baz();
}());

JavaScript variable scoping not expecting result

3 Answers3