I understand what var keyword means inside functions, but now I am trying to understand what is the purpose of var keyword outside function. I made some tests (see below) and it makes no difference. So when it makes any difference if you put var keyword outside functions?
1.
example = 1;
function test(){
var example = 2;
}
test();
alert(example); //alert 1 no matter if example=1 or var example=1 before function
2.
example = 1;
function test(){
example = 2;
}
test();
alert(example); //alert 2 no matter if example=1 or var example=1 before function
3.
var example = 1;
function test(){
alert(example);
}
test(); //always alert 1, no matter if var example=1 or example=1 before function
I understand what var keyword means inside functions, but now I am trying to understand what is the purpose of var keyword outside function. I made some tests (see below) and it makes no difference. So when it makes any difference if you put var keyword outside functions?
1.
example = 1;
function test(){
var example = 2;
}
test();
alert(example); //alert 1 no matter if example=1 or var example=1 before function
2.
example = 1;
function test(){
example = 2;
}
test();
alert(example); //alert 2 no matter if example=1 or var example=1 before function
3.
var example = 1;
function test(){
alert(example);
}
test(); //always alert 1, no matter if var example=1 or example=1 before function
- possible duplicate of Difference between using var and not using var in JavaScript (first sentence). – Felix Kling Commented Aug 8, 2012 at 17:09
- Pay particular attention to the (currently second) answer on that duplicate question -- stackoverflow./a/1471738/211070 – Tom Commented Aug 8, 2012 at 17:14
7 Answers
Reset to default 1The keyword var declares a variable in the current scope (well, technically in the same closure but lets keep it simple for now)
Since both your function (test) and your variable (example) were declared in the 'global' scope they both have access to each other meaning the function test could access the variable example
In your first example you have declared a new var called example, this means that now when you call the var example (inside the method) it will reference this variable instead.
There is a difference!
See this answer https://stackoverflow./a/1471738/211070, but basically:
Since variable declaration creates property with DontDelete flag, the difference between var x = 1 and x = 1 (when executed in global scope) is that former one - variable declaration - creates DontDelete'able property, and latter one doesn't. As a consequence, property created via this implicit assignment can then be deleted from the global object, and former one - the one created via variable declaration - can not be.
There isn't a real difference in the global space as long as you're not in strict mode.
That said, you should still use var as good programming practice. Auto-defined variables are evil.
I believe if you put a var within a function it can only be used within that function alone like a PHP IF statement where as if you put a var outwith the function then it can be used in more than one function - like a variable within that scope of the page.
The var-Keyword does exactly the same when used within functions as it does outside of them: It binds a new variable to the current scope. In the case of a function the scope is the function. Outside of a function the global scope is used. In a browser, that global scope is usually the window-Object.
lg,
flo
The var keyword declares a variable in the current scope. Without it, you are automatically declaring a new property on the window object, or accessing and modifying a same-named variable in a higher scope if one exists. In your example, there is only the global scope and the inner function scope, so var example = 1 in the global scope is, for your purposes, technically identical to just example = 1. However, if all of your above code was executed inside some other function scope, the first 2 examples would declare a global example property, whilst the third would declare a variable local to that scope.
1) The reason this alerts 1 is because even though you are invoking the test() function beforehand, it itself is invoking and creating its own closure and declaring a separate var example = 2; inside of it. (So your alert can't see it, it only sees 1). Now if you did: return example = 2; you would notice alert(example) === 2. This is because you brought the example out from the closure and it effected the previous example variable.
example = 1;
function test(){
var example = 2;
}
test();
alert(example);
2) Here, you aren't creating a new variable inside of the function, so it is able to access (through closure) the variable example outside of it, and change it to 2.
example = 1;
function test(){
example = 2;
}
test();
alert(example); //alert 2 no matter if example=1 or var example=1 before function
3) This last one is a good example of how 'closure' works here. Variables, unlike let's say the function () must be declared above something that tries to access them. Functions on the other hand don't. So although var example = 1 might be below the function test() { } itself, it doesn't matter. What's important is that it is declared before the CALL to test(). This is when the closure is created and it wraps itself around any variables etc it can see/access.
// so this ...
var example = 1;
function test(){
alert(example);
}
// and this work ...
function test(){
alert(example);
}
var example = 1; // <-- notice it's still above the test() func call, it can still see example
test(); //always alert 1, no matter if var example=1 or example=1 before function
// if var example = 1; was down here below it, it would alert "undefined", this is because
// the variable was not available within the scope when test() was called.