Scope in JavaScript

Contact Us or call 1-877-932-8228
Scope in JavaScript

Scope in JavaScript

In JavaScript, like in any programming language, "scope" refers to where a variable is accessible, based on where and how the variable was declared.

All variables have some scope: some portion of your script in which they can be referenced - printed to the screen, say, or used as part of a calculation. Global variables have, unsurprisingly, global scope - they can be accessed (set or read) anywhere in your script. Variables defined with the var keyword have function scope that is more limited; these are variables that might be accessed only within a function (often the function in which they are defined) or some other section of your script. Variables can also have block scope, as we'll see later in this lesson - specific to a block such as a for loop.

Variables declared outside of any function are global, meaning they are accessible to any code inside or outside of functions. Consider the following example:

Code Sample:

Scope/Demos/scope1.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript Scope - Example 1</title>
	<script>
		var v1 = 13;

		function fun1() {
			document.write("inside function fun1, v1 has value: " + v1);
		}
	</script>
</head>
<body>
	<h1>Scope Example 1</h1>
	<p><em>This page has no errors</em></p>
	<script>
		document.write("outside of functions, v1 has value: " + v1);
		document.write("<hr>");
		fun1();
	</script>
</body>
</html>

Code Explanation

Variable v1, created on line 7, has global scope, and is thus accessible anywhere in our scripts. Variable v1 can be written to the screen on line 18 (via document.write) and can be accessed by function fun1 on line 10.

A variable created with the var keyword inside of a function has function scope, meaning that it is not accessible outside of that function. Let's look at a couple of examples - each generating an error - that demonstrate this fact:

Code Sample:

Scope/Demos/scope2.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript Scope - Example 2</title>
	<script>
		var v1 = 21;

		function fun2() {
			var v2 = "variable 2";
		}

		function writeIt() {
			document.write('v1: ' + v1);
			document.write('<hr>');
			document.write('v2: ' + v2);
		}
	</script>
</head>
<body>
	<h1>Scope Example 2</h1>
	<p><em>This page generates an error</em></p>
	<script>
		writeIt();
	</script>
</body>
</html>

Code Explanation

Variable v1, created on line 7 in the same manner as in our first example, has global scope, and is thus accessible inside of function writeIt. Variable v2, however, is created inside of function fun2; as such, it is local to function fun2 and cannot be accessed by function writeIt on line 16. Opening the JavaScript console when browsing to this file shows the error "Uncaught ReferenceError: v2 is not defined".

To further illustrate the point, here's another example:

Code Sample:

Scope/Demos/scope3.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript Scope - Example 3</title>
	<script>
		var v1 = 36;

		function fun3() {
			var v2 = "variable 2";
		}
	</script>
</head>
<body>
	<h1>Scope Example 3</h1>
	<p><em>This page generates an error</em></p>
	<script>
		document.write('v1: ' + v1);
		document.write('<hr>');
		fun3();
		document.write('v2: ' + v2);
	</script>
</body>
</html>

Code Explanation

Variable v1 again has global scope; we can successfully access it (to write to the screen) on line 18. But variable v2 is created inside of function fun3 - it's scope is local to function fun3. Thus we get an error (Uncaught ReferenceError: v2 is not defined") from line 21 when we try to write variable v2 to the screen, even though we call function fun3 before attempting to write the variable to the screen.

Note that, in all of the examples above, we created variables inside of functions using the var keyword.

Next