When should you use the “var” keyword in Javascript? How does the “var” keyword work?
The answer to the question is easy: you should always use the “var” keyword in Javascript. But, you should also understand why you should always use it, and what could happen if you do not use it. Let’s start with an example:
var testVar = "10"; //this has global scope
function scopeTest() {
var testVar = "20"; // this has local scope
alert(testVar); //WHAT DOES THIS LINE OUTPUT?
}
scopeTest();
alert(testVar); //WHAT DOES THIS LINE OUTPUT?
Note that in the code above we have 2 variables called testVar – the first one has global scope because it is defined outside of the function scopeTest. The second one has local scope because it is defined inside the scopeTest function. In the code above, we output the testVar variable in 2 different places – so the question is what is output in the code above?
The code above will output “20” first and then “10” – no big surprise there. Because testVar is also defined locally in the scopeTest function, then the global testVar variable defined outside the function (the one with a value of “10”) is effectively ignored inside the function scopeTest(), so the alert inside the scopeTest function will output “20”. Then, the 2nd alert (outside the function) will output “10”, because the variable that’s recognized is the global one.
Declaring a variable without the “var” in a function
The next question is what would happen if we remove the “var” in front of the testVar variable that is defined inside the scopeTest function. Here is what the code will look like:
var testVar = "10"; //this has global scope
function scopeTest() {
testVar = "20"; //this variable now has no "var" in front of it
alert(testVar); //WHAT DOES THIS LINE OUTPUT?
}
scopeTest();
alert(testVar); //WHAT DOES THIS LINE OUTPUT?
Because we removed the “var” keyword in front of the testVar variable (the one inside the function), this actually means that the testVar variable inside the function will refer to the global variable that was defined before the function. So when we change the value of the “testVar” variable inside the scopeTest function, we are actually changing the global variable. This means that the value of “20” will be attached to the “testVar” variable even outside of the scopeTest function. And, the code above will output “20”, and then “20” again.
Var versus no Var
The “var” keyword in front of a variable will basically declare that variable within the current scope. But, if that “var” keyword is missing, Javascript will search up the scope chain to see if there is a variable with that name in a different scope. And, since it finds a variable with the same name – “testVar” – in the global scope, Javascript will use that variable instead of declaring a new one local to the function.
What happens when you don’t declare a variable in Javascript?
As we showed in the code above, by not declaring the variable testVar in the code above we were accessing a global variable. If we did not already have that global variable declared earlier, then we would be creating what’s called an implied global variable. It’s highly recommended that you always declare your variables in Javascript – even though Javascript does not require that you do.