Why does local variable kill my global variable?

Question

Sorry for this question, but this issue really screwed up my day.

The following Code alerts 10 as it should:

var globalId='10';   function check(){       alert(globalId);   }   check(); 

But this next code alerts undefined:

var globalId='10';   function check(){       alert(globalId);      var globalId;  }   check(); 

I am aware that if I declare a variable in a function its a local variable, but if I already declared it as global, how can it be that my alerts says undefined?

This is an easy example, but in my original code I did a lot of stuff in between the beginning of the function, then a long way down I checked to see if globalId was defined, else define it: if(!globalId){var globalId;} This meant that my alert situated at the top of the function generated undefined, as if JavaScript first executed the whole function, just to see if any variables 'might' be declared, and if so, declare them and therefore my alert pointed to an 'undeclared' variable.

Can anybody explain to me why this happen, and if it is true that JavaScript "pre-declares" all variables before executing a function, even variables declared in conditions not even met?

Answer 1

In javascript, you should know there is something called as HOISTING.

What this essentially means is, when you declare any local variables, the variable declaration is automatically carried to top of the scope.

eg:-

var globalId='10'; function check(){ alert(globalId); var globalId; } check();  

Changes to -

var globalId='10'; function check(){ var globalId; alert(globalId);} check();  

Since globalID is still not assigned any value, it returns undefined in your output. The local variables always get priority over the global variables with same name.

Answer 2

Yes, all variables declared anywhere in a function are local to that function and exist throughout the function's code; they will be used in preference to globals of the same name.

From https://developer.mozilla.org/en/JavaScript/Guide/Values,_Variables,_and_Literals#Variable_Scope :

JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within. [...] Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement.