5.3 Variable Scope
As you can see from the previous section, it is quite easy to define our own functions in Javascript. However, when defining functions, it is important for us to understand the concept of variable scope.
Variable scope refers to the fact that variables defined inside a function are treated differently from variables defined outside.
Let’s consider an example. Add the following code to chap5.js.
var var1 = "var1: declared outside myFunc";
var var2 = "var2: declared OUTSIDE myFunc";
function myFunc() {
var var2 = "var2: declared INSIDE myFunc";
var3 = "var3: declared inside myFunc";
var var4 = "var4: declared inside myFunc";
console.log("Inside myFunc");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
}
In the code above, we declared two variables (var1 and var2) outside myFunc(). We also declared three variables (var2, var3 and var4) inside the function.
Let’s look at how the variables behave differently.
First, let’s call the function by adding the line
myFunc();
to chap5.js (after line 15).
Save chap5.js and refresh template.html. You’ll get the following output:
Inside myFunc
var1: declared outside myFunc
var2: declared INSIDE myFunc
var3: declared inside myFunc
var4: declared inside myFunc
When we run the function myFunc(), we have no problems accessing var1, var2, var3 and var4.
This is because a function can access any variable declared inside itself (var2, var3 and var4). These variables are known as local variables.
In addition, a function can also access any variable declared outside itself as long as the variable is not declared inside another function. Variables that are not declared inside any function are known as global variables. In our example, var1 is a global variable. Global variables are accessible anywhere in the program.
Besides var1, you may notice that we have another variable var2 declared outside myFunc(). This is an interesting variable as we have a var2 inside myFunc() as well. If a local variable shares the same name as a global variable, any code inside the function is accessing the local variable. This is demonstrated by the fact that we get the message “var2: declared INSIDE myFunc” when we access var2 inside myFunc().
Now, let’s see what happens when we try to access the variables outside myFunc(). Add the following code to chap5.js after the previous line:
console.log("Outside myFunc");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
You’ll get the following output:
Outside myFunc
var1: declared outside myFunc
var2: declared OUTSIDE myFunc
var3: declared inside myFunc
Uncaught ReferenceError: var4 is not defined
Notice that we have no problems accessing var1 as it is a global variable. For var2, as we are accessing the variable outside myFunc(), we are actually accessing the variable declared on line 2 (not the one declared on line 6). Hence, we get the output “var2: declared OUTSIDE myFunc”.
var3 is another interesting variable. You may be surprised that we can access var3 outside myFunc() even though we declared it inside the function.
The reason is any variable declared inside a function without using the var keyword is treated as a global variable. Hence, we have no problems accessing var3 outside myFunc(). Javascript allows us to declare a variable without using the var keyword. However, note that it is considered bad programming practice to do so as it can lead to naming conflicts outside the function.
Finally, let’s look at var4. When we try to access this variable, we get a reference error. This is because var4 is a local variable and is hence only accessible inside the function that it is declared in.