So confused about why vars work sometimes with or without var?

Question

I am really confused as to why sometimes vars will not work when "var" is declared in front of them when used in a namespaced object. Isn't adding "var" in front of every variable the correct thing to do to keep it outside the global namespace?

Or would creating any var without declaring "var" first in my namespaced object, ensure of this, so I don't eed to worry about "var"?

Here's an example of my code:

MYNAME.DoStuff = {
   initialize: function() {
       var var1 = 'name'; //1
       var2 = 'name'; //2
       this.var3 = 'name'; //3

       var $var4 = $('#' + name); //4
       $var5 = $('#' + name); //5
       this.$var6 = $('#' + name); //6
   },

   linkStuff: function() {
       // then use the vars from the init above in here
   }
}

MYNAME.DoStuff.initialize();

Can someone tell me which number (1, 2, or 3) is correct? Are there cases where I would use more than one or all? How about when I need to do DOM references with jQuery? Which way is correct (4, 5, or 6)?

Answer 1

Based on what it looks like you're trying to do in the linkStuff method, you might try this:

var DoStuff = {
    firstVar: null,
    secondVar: null,

    initialize: function() {
       // set initial values
       this.firstVar = 'name';
       this.secondVar = 'name2';
    },

    linkStuff: function() {
        alert(this.firstVar);  // 'name'
    }
};
var myname = DoStuff;
myname.initialize();
myname.linkStuff();

Answer 2

The var statement will bind the variable to the scope of the current function, in your example var1 is accessible only within initialize.

Your second example, var2 = 'name'; is simply an assignment made to a -possibly- undeclared identifier.

This is an anti-pattern, and should be avoided. If the identifier is not resolvable higher in the scope chain, var2 will end up being a property of the global object -an implied global, since most of the time you actually try to avoid globals-.

Moreover, the new ECMAScript 5 Strict Mode, completely disallows this kind of assignments, please avoid them...

The third example, this.var3 will create a property in the current object, in your example the this value of initialize will refer to MYNAME.DoStuff because you invoke the initialize method by MYNAME.DoStuff.initialize();.

In this third example you can access this kind of properties on your linkStuff function, just by this.var3 - if you invoke that linkStuff function properly, e.g. MYNAME.DoStuff.linkStuff();-.

Answer 3

As @CMS pointed out, var sets up a variable in the current scope. That's why you do var variablename outside of functions to create globals and var variablename inside functions to create locals.

But in the context of objects, there's more going on. Javascript has a feature called closures, which enables very powerful tricks like private, public and privileged methods (I don't normally like linking to Crockford because he's a bit of an arrogant knob, but sometimes he's a smart knob).

The other thing to watch out for is that Javascript objects are actually very different from objects in most other languages. In Javascript, you don't define them, you build them. If you do something like this:

function stuff() {
   // Do init code here

   this.linkStuff = function() {
        // Do linkstuff code here
   }
}

... you can do myname.dostuff = new stuff() and your initialization code will run automatically. That is also the point to fetch a jQuery object and assign it to a variable for later use.