The code below is JavaScript code. I am trying to understand function scope in JavaScript and following the article over here. I am reproducing the code below -
var cow = "purple"; // just a random cow
var f = function (x) {
var r = 0;
cow = "glue";
if (x > 3) {
var cow = 1; // a local variable
r = 7;
}
return r;
};
var z = f(2);
alert(cow); // returns purple
I don't quite understand why the string "purple" is alerted. The line cow = "glue"; should set the value of the cow variable to "glue". If I remove the if block, and then alert cow in the last statement, I see that the string "glue" is alerted.
When f(2) is called, the if code block is not entered and nothing in it gets executed, so why do I see different results ? i.e why does alerting cow in the last statement return the string "purple" now ?
The code below is JavaScript code. I am trying to understand function scope in JavaScript and following the article over here. I am reproducing the code below -
var cow = "purple"; // just a random cow
var f = function (x) {
var r = 0;
cow = "glue";
if (x > 3) {
var cow = 1; // a local variable
r = 7;
}
return r;
};
var z = f(2);
alert(cow); // returns purple
I don't quite understand why the string "purple" is alerted. The line cow = "glue"; should set the value of the cow variable to "glue". If I remove the if block, and then alert cow in the last statement, I see that the string "glue" is alerted.
When f(2) is called, the if code block is not entered and nothing in it gets executed, so why do I see different results ? i.e why does alerting cow in the last statement return the string "purple" now ?
Share Improve this question asked Jun 12, 2013 at 19:05 user1720897user1720897 1,2464 gold badges14 silver badges30 bronze badges4 Answers
Reset to default 9Variable declarations inside functions are always hoisted to the top. So your code is actually:
var f = function (x) {
var cow, r;
r = 0;
cow = "glue";
if (x > 3) {
cow = 1; // a local variable
r = 7;
}
return r;
};
Inside the function you're always assigning to the local cow, never the global.
The two things to understand here are that Javascript variables are hoisted to the top of their scope, and javascript does not have block scope.
So
- All variables in a scope are considered declared at the beginning of the scope
- an if statement does not create a new scope.
So your example is equivalent to
var cow = "purple"; // just a random cow
var f = function (x) {
var cow, r = 0;
cow = "glue";
if (x > 3) {
cow = 1; // a local variable
r = 7;
}
return r;
};
var z = f(2);
alert(cow); // returns purple
The var declaration in the if statement is hoisted to the top. At that point all cow references within the function refer to the local variable cow, rather than the cow from the outer scope.
Javascript does not have block scope (except in catch blocks).
All var statements are hoisted to the top of the containing function.
Therefore, cow refers to the local variable anywhere in the function, even if the if never executes.
You didn't really read that article, did you? It explicitly states
Does
cowget turned into"glue"when you callf(2)? No,cowis safe in the above code because thevar cowdeclaration inside the if block applies to the entire function. It means thatcowis a local variable for the entire function.
However, when you remove the if block you also remove the variable declaration inside it, and the assignment will target the global variable.