javascript var vs this [duplicate]

Answer 1

If you define a variable as var, then its scope is limited to the function (it can't be seen from the outside). In OO terms it's somehow like a private property, without actually being a property at all.

If you define a variable as a property (this.name) then it is accessible from the outside.

Same goes for functions. Functions declared inside the scope of the function, but not assigned to a property, are only visible from the inside. If you assign a function to a property you are able to access that function from the outside (as long as the property keeps pointing to that function).

function Person(){

    // Declared variable, function scope
    var name = "John";          

    // Property        
    this.surname = "Doe";       

    // Assign anonymous function to property
    this.getName = function(){  
        return name;
    }

    // Assign anonymous function to property
    this.getSurname = function(){ 
        return this.surname;
    }

    // Declare function
    function saluteCasually(){      
        console.log("Hi folks!");
    }

    // Declare function
    function salutePolitely(){          
        console.log("Nice to meet you");
    }

    // Assign (not anonymous) function to property
    this.salutePolitely = salutePolitely;

}

var person = new Person();

console.log(person.name);           // undefined
console.log(person.getName());      // "John"
console.log(person.surname);        // "Doe"
console.log(person.getSurname());   // "Doe"

person.saluteCasually(); // Error: person has not a property "saluteCasually".
person.salutePolitely(); // Prints "Nice to meet you";

person.salutePolitely = function(){ // Properties can be messed with from anywhere!
    console.log("Bananas");
}
person.salutePolitely(); // Prints "Bananas";

Answer 2

with var a you cant access the variable outside the scope however assigning with this can be accessed when you make an object

We add properties to this when we want the properties to exist with the life of the object.We Use var for local variables.

"I am ONLY interested in accessing variables from inside the object, not from outside."

Answer to this statement is use var if you want to use only inside the function not outside as variable defined with var are accessible only to code in the scope in which they were declared, or in lexically nested scopes.

so as Shomz suggested you can check it as:

var o = new MyObject();

a will be undefined as it is defined with var

  o.a; // undefined

while b will be return 2 as it is on this

 o.b; // 2

Answer 3

If you want to use properties once you instantiate the object, var won't work, see below:

function MyObject() {
    var self = this;

    var a = 1;
    this.b = 2;

    var innerMethod = function() {

        logMessage(a); 
        logMessage(self.b); 
    }
}

var o = new MyObject();
console.log(o.a); // undefined
console.log(o.b); // 2

Answer 4

It depends on what you want , using a VAR inside the function will not make it accessible outside the function scope , but from a performance perspective if you are using objects keep everything inside of it , you have already stored this object in the memory why define another variable again .

as said in the Memory Analysis 101 form chrome devtools documentation :

Memory can be held by an object in two ways: directly by the object itself, and implicitly by holding references to other objects, and thus preventing them from being automatically disposed by a garbage collector (GC for short).

The size of memory that is held by the object itself is called shallow size. Typical JavaScript objects have some memory reserved for their description and for storing immediate values.

Usually, only arrays and strings can have significant shallow sizes. However, strings often have their main storage in renderer memory, exposing only a small wrapper object on the JavaScript heap.

Nevertheless, even a small object can hold a large amount of memory indirectly, by preventing other objects from being disposed by the automatic garbage collection process. The size of memory that will be freed, when the object itself is deleted, and its dependent objects made unreachable from GC roots, is called retained size.

Devtools Docs