4

I saw some code that looks like this:

function foo(bar) {
   this.bar = bar;
};

can you rewrite it like this:

function foo(bar) {
   var bar = bar;
};

because then you don't need to keep writing this which is nicer. Do these two bits of code do the same thing?

Many thanks.

ale
  • 11,636
  • 27
  • 92
  • 149
  • 2
    no, they don't :) they do completely different things – karaxuna Apr 04 '13 at 13:02
  • possible duplicate of [Javascript: Do I need to put this.var for every variable in an object?](http://stackoverflow.com/questions/13418669/javascript-do-i-need-to-put-this-var-for-every-variable-in-an-object) – Bergi Apr 04 '13 at 13:02
  • 1
    I think a little wider context would be relevant - these might be used to form a closure, or expose object properties on a function – penguat Apr 04 '13 at 13:03
  • 1
    One is a local variable, the other a property of an object. – Bergi Apr 04 '13 at 13:03
  • What is your goal? Are you sticking with one parameter or are you going to have multiple parameters associated to your function call? – klewis Apr 04 '13 at 13:05
  • See other possible duplicate [var vs this. in Javascript object](http://stackoverflow.com/q/4946625/1048572) – Bergi Apr 04 '13 at 13:07

4 Answers4

11

Using this

This creates a property of a object. It is public, with read-write access. Depending on how the function was invoked (with new?), this will point to a different object. More on the subject here.

function foo(bar) {
   this.bar = bar;
};

foo(10);
console.log(bar); // bar or this.bar .. prints 10

var tmp = new foo(20); 
console.log(tmp.bar); // prints 20
console.log(bar);     // still prints 10


Using var

This creates a local variable (note: the variable is already in scope via the function argument). This is local, accesible only from the scope of the foo function.

function foo(bar) {
   var bar = bar;
}


When use which?

Unless you write oo js, you'd probably want to stick with the second option, or even better - skip the redefinition of bar whatsoever. You gain all the usual benefits of encapsulation.

function foo(bar) {
   // just use argument bar 
}
emesx
  • 12,555
  • 10
  • 58
  • 91
  • and it is also worth mentioning, that it is *cruicial* **how** the function `foo` gets invoked, since it decides the value of `this` and where the data is written. – jAndy Apr 04 '13 at 13:06
4

They are not the same. In the first example you are creating a new property called bar on the foo object, meaning you could do this to access the assigned value from outside the function (used as an object constructor):

function foo(bar) {
   this.bar = bar;
};
var f = new foo(1);
console.log(f.bar);    // => 1

In the second example you're creating a variable called bar which is not accessible outside of the function.

Graham
  • 6,484
  • 2
  • 35
  • 39
0

The difference is if you have otehr function in your function scope like this : 

function foo(bar) {
   var foo = bar;
    alert(bar); //works

    $.ajax({
      [....],
      success : function(response) {
           alert(bar);//not works
           alert(foo);//works
      }
      });
};
JoDev
  • 6,633
  • 1
  • 22
  • 37
0
function foo(bar) {
    this.bar = bar; 
    // this == window -if foo()
    // this == a -if a = new foo();
};

foo('asd'); // assigns 'asd' to global variable window.bar
console.log(bar); //logs 'asd' (window.bar)

var a = new foo('asd');
console.log(a.bar); // logs 'asd'
console.log(bar); // logs undefined

function foo(bar) {
    var bar2 = bar; //bar2 acts only in scope of this function
};
karaxuna
  • 26,752
  • 13
  • 82
  • 117