I came across this pattern for JavaScript initialization:
foo = foo || {};
alert('no errors!');
But it seems that it does not work unless foo was defined before.
There are two variations of the same pattern that seem to work correctly:
var foo = foo || {};
alert('no errors!');
and
foo = window.foo || {};
alert('no errors!');
From my point of view, I don't understand why the first one does not work, but the two other do.
Why is that? Could you please explain in detail?
Javascript has a global object. In the browser, this is referenced by the name window.
window.foo create a property in the global object.
var foo create a global variable. This is very similar to a property of the global object, but you can't use delete on it.
Simply declaring foo without the var keyword also create a property on the global object. It is a language design choice -- a lousy one -- but a design choice none-the-less.
var foo and window.foo both work equally well when you are at the global level. If you are inside of a function -- perhaps a module -- you must use window.foo to make sure you reach the global object.
window.foo on the right-hand side of the assignment, it still creates the window.foo variable with the value of undefined?
property on the window object. To create a variable you use var. However -- when you access a property of any object that doesn't exist, you get the value of undefined. So ... window.XYZZYFOOBAR will be undefined because it doesn't exist.foo. The reason why first alternative was working was because it declared it, the reason why second alternative was working because accessing non-existing property does not cause an ReferenceError as it does on non-declared variable. Thank you.You can't read a variable which isn't defined (that's a reference error). That's why
something = foo;
will lead to an error if the foo variable isn't declared. window is declared of course and there's no problem querying its property foo.
