return value of JS Constructor

Question

I feel like a beginner here. I don't quite get why this 2 codes behave differently. Can someone explain it please? I feel like i miss some JS mechanic here.

Code1:

function Car(){
    var miles = 0;    

    function drive(dist){
        miles = miles+dist;
    }

    return {
       drive:drive,
       miles:miles
   }          
}

var car = new Car;
car.drive(50);

Code2:

function Car(){
    var miles = 0;    

    function drive(dist){
        miles = miles+dist;
    }

    return {
       drive:drive,
       miles:function(){
           return miles;
       }
   }          
}

var car = new Car;
car.drive(50);

So it seams like for code1, JS creates a new scope/closure/whatever....value for miles. Maybe someone smart can provide some background to this behavior.

Fiddle: http://jsfiddle.net/P7Zqv/

Since you have an explicit return value for the constructor function, you aren't really using it as a constructor function so you should give it a name that starts with a lower case letter and not call it with `new`. — Quentin, May 08 '14 at 09:40
In your fiddle: `milesA` is a not a pointer to `miles`. In your posted code: You have 2 closures in both cases, but in case A (_only_) you also have 2 distinct *variables* for `miles`: one internal, one external. In case B, you only have the internal `miles`. — blgt, May 08 '14 at 09:43

score 4 · Accepted Answer · answered May 08 '14 at 09:38

JavaScript copies by value.

In the first example:

The miles variable is 0.
An object is returned with a miles property that has a copy of 0 in it.
The miles variable is updated (now 50) .
The miles property is read (still 0).

In the second example:

The miles variable is 0.
An object is returned with a miles property containing a function that returns the value of the miles variable.
The miles variable is updated (now 50).
The miles function is called and returns the value of the miles variable (50).

so `miles:miles` will do a copy of the value and not a reference? — Novalis, May 08 '14 at 09:42

Hawk · Answer 2 · 2014-05-08T09:51:48.180

the first code is returning the variable miles as it is, it is being updated but is not being read because it's in a closure, just as Quentin mentioned, the second code is returning a function that returns a variable known as a getter function in Javascript, you have made your own getter function that returns the updated value, you can read more about getter functions here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects.

in short the first code returns a variable miles and the second code returns a getter function miles() that returns the variable miles. I hope that helps :)

if you try something like this:

CODE 3

function Car()
{
    var miles = 0;
    function drive(dist)
    {
        return miles += dist;
    }

    return {
        drive: drive,
        miles: miles
    };
}
var car = new Car();
car.drive(50); // returns 50 and not undefined

this way when car.drive(50) is called, you will not get an undefined because the function is returning a value.

return value of JS Constructor

2 Answers2