The var Keyword

Contact Us or call 1-877-932-8228
The var Keyword

The var Keyword

Perhaps more important than what happens when you declare a variable with the var keyword is what happens when you declare a variable without the var keyword. For variables declared without var outside of any function, there is no difference; as we've seen above, these variables are global in scope, accessible anywhere, inside or outside of functions.

But, for variables declared without var inside of functions, the situation is different: variables declared (by assigning a value) without using the var keyword are global, rather than local (i.e. local to their parent function), in scope. In short: any variable declared (by assigning it a value) without using the var keyword is global in scope, regardless of whether it is declared inside of a function or not. Let's look at an example:

Code Sample:

Scope/Demos/var1.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Var - Example 1</title>
	<script>
		var var1 = 51;
		var2 = 6;

		function setVar() {
			var3 = 46;
		}
	</script>
</head>
<body>
	<h1>Var Example 1</h1>
	<script>
		document.write("var1 has value: " + var1);
		document.write("<hr>");
		document.write("var2 has value: " + var2);
		document.write("<hr>");
		setVar();
		document.write("var3 has value: " + var3);
	</script>
</body>
</html>

Code Explanation

Variables v1 and v2 are both global in scope; the use (for var1) of the var keyword makes no difference here, since both variables are created outside of any function.

In function setVar we create variable var3 without using the var keyword - meaning that var3 is (despite being created inside of a function) global in scope. Thus we can write variable var3 to the screen on line 23 - we have to call function setVar first, but had we defined variable var3 with the var keyword on line 11 inside of the function then our attempt to write var3 to the screen on line 23 would have generated an "Uncaught ReferenceError" error.

Just to make sure this isn't already confusing enough, let's look at the case where we have two variables both created with the same name and with the var keyword, one inside of a function and one outside of a function.

Code Sample:

Scope/Demos/var2.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Var - Example 2</title>
	<script>
		var var1 = 18;
		var var2 = -18;
		function SetVar() {
			var var1 = 74;
			var2 = -74;
			document.write('Function SetVar called');
		}
	</script>
</head>
<body>
	<h1>Var Example 2</h1>
	<script>
		document.write("var1 has value: " + var1);
		document.write("<hr>");
		document.write("var2 has value: " + var2);
		document.write("<hr>");
		SetVar();
		document.write("<hr>");
		document.write("var1 has value: " + var1);
		document.write("<hr>");
		document.write("var2 has value: " + var2);
		document.write("<hr>");
	</script>
</body>
</html>

Code Explanation

We create variables var1 and var2, outside of (before) the function, and assign the values 18 and -18, respectively. Inside function SetVar, we declare and set the value of val1 to 74 using the var keyword. Then, we assign the value of -74 to the globally available variable var2 because we are not using the var keyword.

In the body of the page, we write variables var1 and var2 to the screen, call function SetVar, then write the variables to the screen again. Here's what we get:

output of var2.html

The result, while perhaps surprising, reflects the fact that the var keyword ensures that a variable created inside of a function is local to that function: the value of variable var1 is unchanged by the call to function SetVar, while var2 is changed by the call to function SetVar.

Because variable var1 is declared inside the function with the var keyword, its scope is local to the function - it is, in effect, a completely different variable than the variable created before the function on line 7. The variables happen to have the same name, but any modification to variable var1 inside function SetVar does not, as we see from the output of the page, affect the value of the variable declared on line 7.

Next