If I create an object like this:
var foo = foo || {};
There's no problem.
But this:
var foo = bar || {};
Produces the error:
Uncaught ReferenceError: bar is not defined
Why doesn't the second snippet work when the first does?
3 Answers
There is a difference between undefined and undeclared.
As soon as you use var foo on the left, foo becomes declared as undefined. In the latter example, bar is undeclared and can't be accessed by the expression on the right.
Here are some nifty examples to demonstrate:
var foo = (foo===undefined); // foo is now `true`!
var x = x++; // x is now `NaN` (the result of `undefined`+1)
var z = v, v = 1; // z is actually `undefined` here since the "lefts"
// are all declared before the "rights".
Note: You can't do this with globals that don't use var (eg: x=x++).
Here's a fun blog post about undeclared vs undefined. And, for more thrills, here's an SO post that explains how to test whether a variable is declared or not.
Comments
Although I can't specifically answer why the second doesn't work, I can attempt to answer why the first does work. Through variable hoisting the JavaScript interpretor changes the first one to look like this
var foo;
foo = foo || {};
so it works and the second doesn't because by the time it runs the second line, foo is declared as undefined.
Comments
The issue here is the declaration of the variable. If you think about how this is evaluated var will be declared for foo before anything else is evaluated. bar is essentially pointing to something the namespace is completely unaware of.
Once you declare var foo the namespace is aware of the variable regardless of the actual value. In this way without var the namespace tries to look for a built in function or some other non variable definition.
bar? You aren't declaring it. The latter example makes sense.variable || {}syntax was to assign a new empty object ifvariableis undefined?var,foobecomes declared asundefined.