Do you think that var keyword in Javascript is optional because you do not observe any different behavior when you omit it.?
If yes then you must read this blog.
When I started to code in Javascript, I always wondered what was the purpose of the var keyword, since in JavaScript, I can just use a variable without declaring it.
Even if I did not precede my variable name the var keyword, my Javascript code did not complain. For example the following piece of code:
If yes then you must read this blog.
When I started to code in Javascript, I always wondered what was the purpose of the var keyword, since in JavaScript, I can just use a variable without declaring it.
Even if I did not precede my variable name the var keyword, my Javascript code did not complain. For example the following piece of code:
myVariable=2;
alert(myVariable);
alert(myVariable);
alerted the same thing as this:
var myVariable=2;
alert(myVariable);
alert(myVariable);
So I had a question in my mind that since var declares a variable( optionally initializing it to a value) and since here in Javascript I can use a variable without declaring it, then why do we the var?
Let us find the answer…
The first thing to find out is that “is there any difference between using var and not using var in JavaScript?”.
And then second thing to understand is that “if there is a difference then what is it?”.
Moving ahead to find out the solution to my first question, I wrote another piece of code in Javascript. This time it was a little complex than what I had written earlier one:
try{
function test() {
var foo = "i am foo";
};
test();
alert(foo);
}catch( e){
alert(e);
}
function test() {
var foo = "i am foo";
};
test();
alert(foo);
}catch( e){
alert(e);
}
When I ran the above piece of code, I got an alert message:
This alert message in the catch block got displayed in the browser. That means there was something wrong in my program.
Oh yes I found it- I was trying to refer to the variable named foo outside of the function test().
Oh yes I found it- I was trying to refer to the variable named foo outside of the function test().
Now since foo was local to that function, and I was trying to refer to that variable outside of it’s scope therefore I received an error called ReferenceError. I again ran the same piece of codewith a very-very minor modification:
Since in javascript I can use a variable without declaring it . Therefore this time I just removed the keyword var that preeced the variable name “foo”. This variable is still local to the function test(). But to my surprise the output changed:
try{
function test() {
foo = "i am foo";
};
test();
alert(foo);
}catch( e){
alert(e);
}
function test() {
foo = "i am foo";
};
test();
alert(foo);
}catch( e){
alert(e);
}
Since in javascript I can use a variable without declaring it . Therefore this time I just removed the keyword var that preeced the variable name “foo”. This variable is still local to the function test(). But to my surprise the output changed:
I did not get the “ReferenceError” message as alert.
Therefore I concluded that the answer of my first question “is there any difference between using var and not using var in JavaScript?” is yes.
We get different behavior in both the situations and therefore thinking that var keyword in Javascript is optional is a big mistake that programmers have.
My second question is about “what is this difference?”, or rather I will say” why is there a difference? “.
The answer to my second question is in the output of the previous example.
Just think about the outputs, in first case, there was a ReferenceError in the code because I was trying to refer to a local variable outside of it’s scope that is outside the function test().
In the second case there was no error in the program, even though I had assigned: foo = "i am foo"; inside the function test(), yet it was visible to the code outside of that function. That means there is a difference in the scope of the variable when we use var and when we do not use.
Using var outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (it is now a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.
Understanding var is important in avoiding subtle bugs related to variable scope.
References:
Oreilly: Why You Should Use the Var Keyword in JavaScript
MDN: var Keyword
Therefore I concluded that the answer of my first question “is there any difference between using var and not using var in JavaScript?” is yes.
We get different behavior in both the situations and therefore thinking that var keyword in Javascript is optional is a big mistake that programmers have.
My second question is about “what is this difference?”, or rather I will say” why is there a difference? “.
The answer to my second question is in the output of the previous example.
Just think about the outputs, in first case, there was a ReferenceError in the code because I was trying to refer to a local variable outside of it’s scope that is outside the function test().
In the second case there was no error in the program, even though I had assigned: foo = "i am foo"; inside the function test(), yet it was visible to the code outside of that function. That means there is a difference in the scope of the variable when we use var and when we do not use.
The scope of a variable declared with var is the "enclosing function" or, for variables declared outside a function is the "global scope" (which is bound to the global object).
Inside a function, all undeclared variables are "global". Only those declared with var are "local".
Inside a function, all undeclared variables are "global". Only those declared with var are "local".
Using var outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (it is now a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.
var a = 1;
b = 2;
delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b; //'b' property doesn't exist in the global object
// the 'b' variable stops being a variable
b = 2;
delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
delete this.b; //'b' property doesn't exist in the global object
// the 'b' variable stops being a variable
Understanding var is important in avoiding subtle bugs related to variable scope.
References:
Oreilly: Why You Should Use the Var Keyword in JavaScript
MDN: var Keyword