var keyword and javascript function's scope

Question

I would like to find the easiest way to be sure about the scope of variables.

Seeing at next example (jsfiddle):

var foo = function() {
    var bar = function() {
        pub = "public";
        var pri = "private";

        alert(pub) // public
        alert(pri) // private
    };

    // alert(pub) // pub not defined
    bar();
    alert(pub) // public
    // alert(pri) // pri not defined
};

foo();
alert(pub) // public
// alert(pri) // pri not defined

Can I say that:

1.- All variable prefixed with var keyword will be visible inside its function and all their nested function?
2.- All variable without var keyword will be visible everywhere after (his function container) be executed?

Answer 1

1. That is true, unless they are shadowed by another inner definition of the same variable.
2. All variables without var will be global, unless they've already been defined by an outer scope.

Since people mentioned globals...

You shouldn't use globals, always declare your variables with var to avoid confusion. If you must use them, scope them to a global namespace that is used for your code. This will help you avoid collisions with other code on the page.

var ns = {};
// Now use this anywhere in your code
ns.myGlobal = 49;

Answer 2

Yes. You've understood it correctly.

Think of any variable with the keyword "var" in front of it as visible to that function and it's nested functions. Think of any variable without the keyword "var" in front of it as window.variable.

var foo = function() {
    var bar = function() {
        pub = "public";
        var pri = "private";

        alert(pub) // public
        alert(pri) // private
    };

    // alert(pub) // pub not defined
    bar();
    alert(pub) // public
    alert(pri) // pri not defined
};

foo();
alert(pub) // public
alert(pri) // pri not defined

As a general rule of thumb you shouldn't use global variables.

Answer 3

Check this out for more clarity...

var foo = function() {
    var pri = "OUTER";// this is what I changed...
    var bar = function() {
        pub = "public";
        var pri = "private";

        alert(pub) // public
        alert(pri) // private
    };

    // alert(pub) // pub not defined
    bar();
    alert(pub) // public
    alert(pri) // pri not defined
};

foo();
alert(pub) // public
alert(pri) // pri not defined