When should I use this.x vs var x?

Question

While making a javascript class function, i'm using this. a lot. But while using that, its making me wonder whether it would've made a difference to use var instead.

var myClass = function() {
    this.x = 4;
    return {
        getVal: this.x
    };
}

versus the same thing with the use of var

var myClass = function() {
    var x = 4;
    return {
        getVal: x
    };
}

Whats the difference and when should i use them?

Answer 1

Variables with this become public variables while those with var become private variables.

The variables or function declared with this keyword become instance members of the class which means they will be available in each newly created instance of that class. When you use this, you have created a class and you need to instantiate it using new keyword as shown below.

Example:

function Foo() {
  // private var
  var bar = 'I am bar';
  // public var
  this.baz = 'I am baz';
}

var f = new Foo;
console.log(f.bar); // undefined
console.log(f.baz); // I am baz

---

While making a javascript class function, i'm using this. a lot. But while using that, its making me wonder whether it would've made a difference to use var instead.

There is significant difference, you should not creates variables with this keyword that you don't want to appear in instances of your class unless otherwise needed. That simply creates an overhead and is computational waste as Crockford calls it.