Best IT Recipes

Why is a shadow variable evaluated to undefined if it is defined in the outer scope?

Consider the following code snippet:

<html><head></head> <body> <script type="text/javascript"> var outside_scope = "outside scope"; function f1() { alert(outside_scope) ; } f1(); </script> </body> </html>

The way out for this code is that the message "outside scope" is displayed in the warning field. But if I change the code a bit like:

 <html><head></head> <body> <script type="text/javascript"> var outside_scope = "outside scope"; function f1() { alert(outside_scope) ; var outside_scope = "inside scope"; } f1(); </script> </body> </html>

the warning window displays the message "undefined". I could have understood the logic if it displays "undefined" in both cases. But then it doesn’t happen. It displays "undefined" only in the second case. Why is this?

Thanks in advance for your help!

+8
javascript variables shadowing
Oct 06 '09 at 21:57
source share
6 answers

In the first case, your code accesses the global variable "outside_scope", which was initialized by the "external area".

Javascript has a function level scope, so in the second case it accesses the variable scope "outside_scope", but it has not yet been initialized during the warning window. Thus, it displays undefined.

+12
Oct 06 '09 at 22:02
source share

Variables are subject to rise . This means that no matter where the variable is placed inside the function, it moves to the top of the area in which it is defined.

For example:

 var outside_scope = "outside scope"; function f1() { alert(outside_scope) ; var outside_scope = "inside scope"; } f1();

Gets the interpretation in:

 var outside_scope = "outside scope"; function f1() { var outside_scope; // is undefined alert(outside_scope) ; outside_scope = "inside scope"; } f1();

Because of this, and the function is only for the scope that JavaScript has, it is recommended that you declare all the variables at the top of the function to remind you what will happen.

+20
06 Oct '09 at 22:09
source share

JavaScript has a scope, not a block scope.

In the second case, the external_scope declaration goes up to the top of the function (but the assignment is not).

This is a great example of why JavaScript code is easier to read if you place all the variable declarations at the top of the function. The second example is equivalent:

 function f1() { var outside_scope; alert(outside_scope); outside_scope = "inside scope"; }

and now you can now understand why you are getting "undefined."

+5
Oct 06 '09 at 22:07
source share

In the second example, a local variable exists for the entire scope. It doesn’t matter that you defined it after a warning, it exists for the whole function.

However, the actual assignment does not occur until after the warning, therefore, "undefined".

+4
Oct 06 '09 at 22:04
source share

what an interesting case.

in the first example, you defined a global variable. it has a global scope and is therefore available in any function / object to execute.

in the second example, you "locked" the global variable scope scope, but since it was not yet initialized during the warning, it returns "undefined".

I agree that this is not the most intuitive quirk, but it makes sense.

+1
Oct 06 '09 at 22:04
source share

This is due to what is called displaying variable declarations .

Basically, JavaScript separates the variable declaration in two , leaving the destination in which you made the declaration and raising the actual declaration to the top of the function :

 var f1 = function () { // some code var counter = 0; // some more code } var f2 = function () { var counter; // initialized with undefined // some code counter = 0; // some more code }

At run time, f1() goes into f2() . I wrote a detailed blog post about this here . Hope this helps you understand what is going on in your code.

This is also the reason that it is recommended to declare your variables at the top of the function in JavaScript. This helps to understand what the code does when it works.

+1
May 24 '10 at 12:10
source share


More articles:


All Articles