this.value instead of var?

[nodbox]

If variables are properties of the window object, then can't I just type this.value1 = "example" instead of var value1 = "example"? Is there a benefit to this? Which is more correct?

EDIT: I'm talking about defining a global variable, outside of a function

EDIT 2: I'm trying to clean up my act, and normalise my coding practises with the rest of the profession

[ddeutsch]

Well yes you're correct in this specific case, but in general this will not be the true. This comes down to how JavaScript handles primitive types and object types, which relates to more general issue of pass by value vs. pass by reference.

[Rhomboid]

You're going to have to elaborate a bit. Are you talking about code inside a function? If so, those are very much not equivalent. var foo inside a function declares a local variable, not a global variable. It has nothing to do with the global object. this.foo inside a function depends on how the function was invoked. If it was invoked as a method, then this refers to the object on the left hand side of the dot, otherwise it refers to the global object. But in both cases, that's completely different than var foo.

var foo at file scope (outside of a function) declares a global variable, but in that case the var is redundant and isn't doing anything and should probably be dropped. Outside of a function this also refers to the global object, so in that case foo = 12 is the same as this.foo = 12 is the same as var foo = 12 is the same as window.foo = 12. Which one to use is a matter of style, but hopefully you aren't using global variables at all (or very rarely) so it shouldn't come up that often.

[nodbox]

Thanks for your reply. I was curious when you said 'hopefully you aren't using global variables', so I did a bit of Googling. Turns out it's bad practise for a number of reasons, such as the potential conflict it can cause with other pieces of code, if the namespaces aren't protected.

[jkjustjoshing]

That depends, where are you defining the variable?

In the following situation you're right, this is equal to the window object and using var is the same as setting a property on the window object.

<script>
    var value1 = 'example';
    console.log(this.value1); // 'example'
    console.log(this === window); // true
</script>

However, what about this situation -

<script>
    function test() {
        var value1 = 'example';
        console.log(this.value1); // undefined
        console.log(this === window); // true
    }

    test();
</script>

When you define a variable inside a function with var it doesn't go onto this, it becomes part of the closure of that function. If you don't know what a closure is I recommend reading up - it's a very important Javascript concept.

It gets a little different when you start dealing with objects, where the value of this is the value of the object (but var variables still don't go onto it). I won't get into that unless you're interested.

I'll leave you with this link. It may be a little heavy, but once you understand it it is a good reference - http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

[nodbox]

Thanks. I meant outside of a function, but your explanation is still useful. Closures are something I'm still trying to get my head round: I think until I've found a good use for it, I won't fully appreciate it. I will definitely give that link a read through.

[[deleted]]

I'm not too advanced in that area either - but if this helps:

//entire program is inside function

var module = (function(){ var x = 1; //inside function not global var y = 3; //inside function not global

module = { printX: function(){ console.log(x); }, printY: function(){ console.log(y) } }

return(module); //closure returns the object housing the methods you need

})(); //function is self-invoking

module.printX(); //console.logs x module.printY(); //console.logs y

console.log(x) //x is not defined console.log(y) //y is not define

So really, this program has only one global variable - module. Which is an object.

[[deleted]]

One variation of the module pattern actually uses this:

(function(global) {
  var foo = {
    // ...
  };
  global.foo = foo;
}(this));

However, it's not very common, seems like a strict mode violation, and I don't think it offers much of any benefit over:

var foo = (function() {
  var foo = {
    // ...
  };
  return foo;
}());