javascript module pattern return object reference?

Question

my understanding is that objects are passed around by reference.. I've implemented the module patters as below.

var myModule = (function(){
    var obj = {};

    return {
        obj: obj,
        updateObj: function(newObj) {
            obj = newObj;
        }
    }

}())

myModule.obj;   //  {}
myModule.updateObj({foo:'bar'});
myModule.obj;   //  still {}  :(

Where am I going wrong? Isn't myModule.obj a reference to the internal obj var?

EDIT: ended up going with this:

var myModule = (function(){

    var public = {
        obj: {},
        updateObj: function(newObj) {
            public.obj = newObj;
        }
    }

    return public;

}())

I may be wrong, but from a quick look, your parentheses may be off. Shouldn't it be (function() { ... })() ? — Abdul Ahmad
– Abdul Ahmad, Commented Aug 4, 2016 at 15:42
There is a syntax error in there...somewhere Unexpected token }. — Spencer Wieczorek
– Spencer Wieczorek, Commented Aug 4, 2016 at 15:46
@SpencerWieczorek yes, obj = newObj, here comma should be ;. Ignoring syntax errors — Tushar
– Tushar, Commented Aug 4, 2016 at 15:46
@duxfox-- Nope, that the immediately invoking function pattern — Brad Kent
– Brad Kent, Commented Aug 4, 2016 at 16:33

T.J. Crowder · Accepted Answer · 2016-08-04 15:56:47Z

Where am I going wrong?

You're assigning a new reference to the obj variable, but that's not what your console code is looking at. It's looking at the reference in the obj property on the object you're returning.

Isn't myModule.obj a reference to the internal obj var?

No. This:

return {
    obj: obj
    // ...
}

copies the object reference from the variable to the property, after which there is no link between the variable and the property.

After you've created myModule, before your callto updateObj, here's what you have in memory (with some irrelevant details omitted):

 +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
 |  +−−−−−−−−−−−−−−−−−−−+                                     |
 +−>| execution context |                                     |
    +−−−−−−−−−−−−−−−−−−−+                                     |
    | obj: Ref11235     |−−−−−+                               |
    +−−−−−−−−−−−−−−−−−−−+     |                               |
                              |   +−−−−−−−−+                  |
    +−−−−−−−−−−−−−−−−−−−−−+   +−−>| object |                  |
    | variable "myModule" |   |   +−−−−−−−−+                  |
    +−−−−−−−−−−−−−−−−−−−−−+   |                               |
    | obj: Ref11235       |−−−+   +−−−−−−−−−−−−−−−−−−−−−−−+   |
    | updateObj: Ref88452 |−−−−−−>|  function             |   |
    +−−−−−−−−−−−−−−−−−−−−−+       +−−−−−−−−−−−−−−−−−−−−−−−+   |
                                  | environment: Ref71423 |−−−+
                                  | [[code]               |
                                  +−−−−−−−−−−−−−−−−−−−−−−−+

Ref11235 is just a plaeholder for the value of the object reference to that object. (Similarly Ref88452 is the object reference for the function, and Ref71423 is the object reference to the behind-the-scenes "EnvironmentRecord" object the updateObj function has a reference to so it can update that environment's obj variable.)

After your call to updateObj, you've changed the reference in the obj property of myModule, but that doesn't change the reference in the obj variable:

 +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
 |                                +−−−−−−−−+                  |
 |  +−−−−−−−−−−−−−−−−−−−+     +−−>| object |                  |
 +−>| execution context |     |   +−−−−−−−−+                  |
    +−−−−−−−−−−−−−−−−−−−+     |                               |
    | obj: Ref11235     |−−−−−+   +−−−−−−−−−−−−+              |
    +−−−−−−−−−−−−−−−−−−−+         |   object   |              |
                              +−−>+−−−−−−−−−−−−+              |
    +−−−−−−−−−−−−−−−−−−−−−+   |   | foo: "bar" |              |
    | variable "myModule" |   |   +−−−−−−−−−−−−+              |
    +−−−−−−−−−−−−−−−−−−−−−+   |                               |
    | obj: Ref65243       |−−−+   +−−−−−−−−−−−−−−−−−−−−−−−+   |
    | updateObj: Ref88452 |−−−−−−>|  function             |   |
    +−−−−−−−−−−−−−−−−−−−−−+       +−−−−−−−−−−−−−−−−−−−−−−−+   |
                                  | environment: Ref71123 |−−−+
                                  | [[code]               |
                                  +−−−−−−−−−−−−−−−−−−−−−−−+

The only change is in myModule.obj's value, which now refers to a new object.

If you change updateObj to update the property instead:

updateObj: function(newObj) {
    this.obj = newObj;
}

...then you'll see the result you expect. (At which point it would probably make sense to do away with the obj variable entirely.)

@Tushar: Text editor. There's a secret to lining up the − and + though. ;-)
I'm a bit conflicted.. Awesome internals explanation and fix via using this.. @ivan-schmidt's answer wins in the succinctness category

Tushar · Accepted Answer · 2016-08-04 15:41:25Z

3

The problem is that obj inside the updateObj does not refer to the obj variable that is defined inside the module. To refer to the same obj as in the myModule, use this context.

this.obj = newObj;

var myModule = (function () {
    var obj = {};

    return {
        obj: obj,
        updateObj: function (newObj) {
            this.obj = newObj;
        }
    };
}());

console.log(myModule.obj);
myModule.updateObj({
    foo: 'bar'
});
console.log(myModule.obj);

answered Aug 4, 2016 at 15:41

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Comments

Quentin · Accepted Answer · 2016-08-04 15:42:07Z

2

Isn't myModule.obj a reference to the internal obj var?

No, it isn't.

var obj = {}; creates an object and assigns a reference to it as the value of obj.

obj: obj copies the value of obj (i.e. the reference) to the obj property of the other object.

obj = newObj overwrites the value of obj with a reference to the new object. This does not touch the obj property so it is still a reference to the first object.

answered Aug 4, 2016 at 15:42

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Brad Kent Over a year ago

That's what I thought may be going on... obj = newObj is overwriting/replacing

Ivan Shmidt · Accepted Answer · 2016-08-04 16:01:14Z

1

This one is similar to code below:

var a = {}, b=a;
a = {some:1};
alert(b.some);

That won't work, cause in line a={some:1} you are losing your link to b.
Hope it'll make sense!

answered Aug 4, 2016 at 16:01

Ivan Shmidt

561 bronze badge

Comments

Maxx · Accepted Answer · 2016-08-04 15:47:11Z

0

There are an objects in memory and there are adresses of this objects. Your variable obj contains address to object. When you assign obj variable to obj property you assign address. Then you overwrite address in obj variable to another object, but in obj property address is still the same.

answered Aug 4, 2016 at 15:47

Maxx

1,75810 silver badges17 bronze badges

Collectives™ on Stack Overflow

javascript module pattern return object reference?

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related