JavaScript Scope of Variables

Scope is the area of the program within which a given variable, object or function is active, visible and available. JavaScript variables have global scope or function scope.

Local JavaScript Variables

Variables declared inside a JavaScript function are local to the function. They are not accessible outside function.

Example

<!DOCTYPE html>
<html>
<body>

<p>The local variable address cannot be accessed from code outside the function:</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML =
"The address is " + typeof address;

// code here can not use address
function myFunction() {
		var address = "12345, New York, US";
		// code here can use address
}
</script>

</body>
</html>

Download the code Run the code

As local variables are only available within their functions, same variable name can’t be used outside function scope. Local variables are deleted from stack after function execution is completed.

Global JavaScript Variables

A variable declared outside a function, has global scope and is available anywhere within JavaScript code, including functions.

<!DOCTYPE html>
<html>
<body>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>
var address = "12345, New York, US";
myFunction();

function myFunction() {
	document.getElementById("demo").innerHTML = "I can display " + address;
}
</script>

</body>
</html>

Download the code Run the code

Automatically Global

When a variable, used for the first time inside a function, is assigned a value without declaring (using var), will become global automatically.

<!DOCTYPE html>
<html>
<body>

<p>
If you assign a value to a variable that has not been declared,
it will automatically become a GLOBAL variable:
</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML =
"I can display " + address ;

function myFunction() {
    address = "12345, New York, US";
}
</script>

</body>
</html>

Download the code Run the code

Local variables are deleted when function is completed whereas global variables are deleted when page execution is completed. Function’s arguments are always local.

Scope nesting

Scope of Variables in Javascript

If functions are defined inside function, then the scope can be resolved by looking at the nested level of the location of the variable. If the function in which a variable is referenced does not contain the definition of the variable, then go to the parent level (function) to see if that variable is defined there. If not go one more level up. Eventually you will end up at the top level which is the global scope. This can be illustrated using the above image as follows:

The building represents our program’s nested scope ruleset. The first floor of the building represents the current scope. The top level of the building is the global scope. You resolve variable references by looking on your current floor (function) first, and if you don’t find it, go to the next floor (parent function), looking there, then the next (grand parent), and so on. Once you go to the top floor (the global scope), you either find what you’re looking for, or you don’t.

You can read more about the javascript scope at this stackoverflow page.

<<< JavaScript VariablesJavaScript Operators >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .