JavaScript – Variable scope inside a Function

The availability or accessibility of a variable within an executing program is referred to as variable scope. A variable is available for use if its data can be accessed or used.

If a variable is available only in certain part of the program, it is said to have local scope. If, on the other hand, a variable is accessible through out the program, it is said to have global scope.

[tab:Local Scope]

Local scope

Variables, for instance, declared in a function have a local scope. Essentially what happens is when the function starts to execute, any variables declared inside the function are created for your use. The variables can used until the function ends. Once the function returns (or its execution stops), the variables inside the function are destroyed.

Let's work with some examples to show the significance of understanding variables scope. In the first example, we show how the value of a local variable is hidden outside of our function:

<script language="javascript">
 function testVariableScope () {
 var scope = "local"; 
 }
 testVariableScope ();
 document.write (scope);
 </script>

In the example, we create a function called testVariableScope and inside the function we simply declare a variable called scope. We call (or request the execution of) the function with the statement: testVariableScope ();. We next use the document.write method to print value of the variable scope. Because the variable has a local scope, its value is not printed.

In fact, if you look at the error log, for instance, in JavaScript Console of Mozilla Firefox browser, you will notice that the variable scope is not defined (i.e., its value is not visible outside of the function):

[tab:Global Scope]

Global scope

Variables declared, for example, outside of a function have global scope. In this case, a function can access not only its locally declared variables but also those variables that are declared outside of the function — global variables. Consider the following example:

<script language="javascript">

var scopeVarOutsideFunc = "global"; // global variable

function testScope () {

var scopeVarInsideFunc = "local";

document.write ("testScope says:<br> scopeVarOutsideFunc = " + scopeVarOutsideFunc + "<br> scopeVarInsideFunc = " + scopeVarInsideFunc);

}

testScope ();

document.write ("<br><br>Done calling function.");
document.write ("<br>Value outside of the global variable scopeVarOutsideFunc is " + scopeVarOutsideFunc);
</script>

In this example we declare two variables, each with different level of scope. While the variable scopeVarOutsideFunc has a global scope, scopeVarInsideFunc has a local scope — only accessible inside of the function.

See the following output (notice that the scopeVarOutsideFunc's value is also printed inside the function since this variable has global scope):

scopeVarOutsideFunc = global
scopeVarInsideFunc = local

[tab:Local and Global]

Local and global variables

It is a good practice to pay attention to variable names. One of the guidelines of properly naming variables is to not repeat a variable name. For instance, not to create two or more variables with the same name and scope. What is the output of the following code?

<script language="javascript">

var myScope = 10;

function TestmyScope () {

var myScope = 15;

document.write ("Inside function myScope = " + myScope);

}

TestmyScope ();
document.write ("<br>Outside function myScope = " + myScope);
</script>

In this example, we are using two variables with the same name: myScope.

By doing so, the value of the global variable is hidden inside the function. In other words, only the value of the local variable is visible to the function:

By reviewing this example, you may have assumed that the value of the global variable myScope (declared outside of the function) is 15 since we updated it inside the function. Analyze the example carefully as we only updated the local variable. As noted earlier, a variable declared inside the function only has local scope. Thus any updates or its original value not visible outside of the function.

(See the very first example above for any further explanation). Note this variable is not undefined outside of the function since we declared it for global scope as well.

This discussion should not imply that a function cannot update the value of a global variable. We can use the same example above and remove just the word var inside the function to avoid declaring a new variable:

<script language="javascript">
 var myScope2 = 10;
 function TestmyScope2 () {
 myScope2 = 15;
 document.write ("Inside function TestmyScope2 = " + myScope2);
 }
 TestmyScope2 ();
 document.write ("<br>Outside function TestmyScope2 = " + myScope2);
 </script>

The following shows the output of the updated variable:

[tab:END]