David’s Web Development Blog

Lately I’ve been a bit addicted to answering questions on Yahoo! Answers.  I think it’s because of the excitement I feel when I can finally find a question I can answer! 

Anyhow, one of the recent questions was regarding global variables in JavaScript.  One person responded incorrectly that writing “var” in front of variable names makes that variable global, according to documentation from Mozilla, which they misread.  So I jumped on my blog to correct this, and I was going to write here that writing “var” in front of your variable name doesn’t have any effect on the variable being global, and then I found that I myself had misread the documentation:

You can declare a variable in two ways:

With the keyword var. For example, var x = 42. This syntax can be used to declare both local and global variables.

By simply assigning it a value. For example, x = 42. This always declares a global variable and generates a strict JavaScript warning. You shouldn’t use this variant.

Oh!  So apparently writing “var” does matter!  For some reason I was under the impression that the fancy “module pattern” a la Crockford guaranteed the protection of variables within modules.  But I was wrong!  Check out the following code:

<script type="text/javascript">
//all variables defined outside of functions are global
global1     = "I'm global";
var global2 = "I'm global";

//defining variables in functions doesn't guarantee them to be local
function globalTest1 () {
	global3    = "I'm global";  //global variable even though it's inside a function!
	var local1 = "I'm local";   //adding "var" in front keeps it local
};

//alternate method of declaring a function, but same effects as globalTest1
globalTest2 = function () {
	global4    = "I'm global";
	var local2 = "I'm local";
}

//even with fancy-schmancy encapsulation, we might still end up with globals!
globalTest3 = {
	local3: "I'm local",
	test: function () {
		global5     = "I'm global (surprise!)";
		var local4  = "I'm local";
	}
};

</script>

What I learned by testing for myself is what apparently wasn’t made clear to me previously: writing all your variables within functions isn’t enough to protect them.  Even in Douglas Crockford’s “module pattern” there’s a way to foul up and end up with unintentional global variables.  That was especially surprising - as it turns out, I thought global5 was completely protected from the outside unless I defined it as a return value of the function.  But this isn’t the case - global5 is definitely accessible from outside the function.  Try it for yourself with a simple alert(global5) script!

Fortunately this can be remedied with a simple (yet annoying) solution: get in the habit of both writing variables inside functions and with “var” in front of them.