Question

As a test to make sure calls to the JSON object don’t fail in IE I recently added this to my js library:

//Works
//if(!JSON) var JSON={};
//JSON.stringify = JSON.stringify || function(){};
//Works
//if(!window.JSON) JSON={};
//JSON.stringify = JSON.stringify || function(){};
//Does not work
//if(!JSON) JSON={};
//JSON.stringify = JSON.stringify || function(){};
//Best of both!
if(!window.JSON) var JSON={};
JSON.stringify = JSON.stringify || function(){};

When I say “does not work” I mean it doesn’t work in IE7 and throws a “JSON blah blah blah” error. Why does specifying window.JSON not throw the error? And why would not specifying window.JSON but using a var JSON not throw an error? Is this just silly IE stuff I shouldn’t worry about or is the result of this dangerous and going to be a problem for other browsers?

Note the same is true for “console”.

Answer 1

Accessing an undefined global variable will always throw. Accessing an undefined property of an object will always return undefined. The fact that window is an alias for global doesn’t change the rules here, accessing a undefined member of window will return undefined.

As for why the second example doesn’t throw is because all vars are hoisted to the enclosing scope regardless of where they appear and before any code is executed in that scope. This means the JSON variable is defined even if the var is not executed, it will just contain undefined. var does two things, creates a variable in scope and, optionally, intializes the variable. Creating the variable is hoisted to the top of the scope, assigning it is performed where it appears. All variable contain undefined until they are assigned a value. If the assignment is not executed they will remain undefined. Duplicate var in the same scope are ignored. This means that if JSON is already in scope, the var is ignored.

This is not silly IE stuff, all ES5 conforming JavaScript implementation need to follow the rules I outlined above.