Variable scope problem

Question

Since I am a JavaScript newbie, I started learning it but I got stuck just at the beginning. I am following a Mozilla Tutorial and I have a problem with variable scope in JavaScript. I have some code:

var myvar = "my value";

var zmienna = "string";

(function () {
    alert(myvar);
    alert(zmienna);
})();

(function () {
    alert(myvar); // undefined
    var myvar = "local value";
    alert(zmienna);
})();

In the tutorial, I've read that JavaScript variables are not visible from function blocks. Well, first two alerts says correct values. It's strange then, because third alert says "undefined", despite fact that nothing has changed from previous function block. The fourth one, again, prints right value.

Could anybody explain me, what is happening here? I would be very glad, because tutorial says nothing more about that.

Answer 1

The use of var is hoisted.

Since you have var myvar inside the function, there is a locally scoped myvar. Since you assign a value to it after you alert it, it is undefined when you alert it.

Answer 2

"I've read that JavaScript variables are not visible from function blocks."

That's not quite right. They are available from the nested functions.

Nested functions create a scope chain. A function created inside another function has access to its own variables as well as the variables of the function in which it was nested.

But function A can not see the variables of function B if function A was not nested inside function B.

var myvar = "my value"; // <-- global variable, seen by all functions    
var zmienna = "string"; // <-- global variable, seen by all functions

(function () {
    alert(myvar);    // <-- referencing the global variable
    alert(zmienna);  // <-- referencing the global variable
})();
(function () {
    // v--- Declaration of these "local" variables were hoisted to the top...
    // var myvar;    // <--- ...as though it was here.
    // var new_var;  // <--- ...as though it was here.

    alert(myvar); // undefined (myvar is delcared, but not initialized)
    alert(new_var); // undefined (new_var is delcared, but not initialized)

    var myvar = "local value"; // <-- assign the value

    alert(zmienna);  // <-- referencing the global variable
    alert(myvar);  // <-- referencing the local variable

    var new_var = "test";  // <-- another new local variable

    // A nested function. It has access to the variables in its scope chain.
     (function() {
         alert(myvar);  // <-- referencing the variable from its parent func
         alert(new_var);  // <-- referencing the variable from its parent func
     })();
})();
/* 
Here's a new function. It was not nested inside the previous function, so it
   has access to the global variables, and not the locals of the previous func
*/
(function () {
    alert(myvar);    // <-- referencing the global variable
    alert(new_var);  // <-- ReferenceError
})();