Accessing property of javascript object gives wrong value

Question

Pls see the simplified code below. I observed that accessing the property xproducttype of userapp provides 2 different values - the initial (incorrect) value when accessing directly, and the (correct) value (set by some code later) when accessing via a function (getXproducttype). I dont understand why I dont get the right value when accessing the property directly(e.g.,userapp.xproducttype)? Only when I define a function (like getXproducttype) I get the right value (0 in example)...

The simplified code:

userapp = function(){ //module pattern
 //userapp properties 
 var xproducttype = 1000;

 var getXproducttype = function(){
   return xproducttype;
 }

 var ready = function(callback){
   //here - before callback()- xproducttype is set to 0 by some code; 
   //no further code changes xproducttype again (!)

   callback();
 };//ready()

 return{ xproducttype:xproducttype,
      getXproducttype:getXproducttype}
}(); //userapp = function(){


$(document).ready(function(){

  userapp.ready(function() {

    //between the next 2 console.log() code lines is no other code (!)
    console.log('userapp.xproducttype: '+userapp.xproducttype); //returns the initial (wrong!) value 1000
    console.log('userapp.getXproducttype(): '+userapp.getXproducttype()); //returns (correct!) value 0 set later

  });//userapp.ready(function()

}); //$(document).ready

not sure whether I understand your question..ready() within userapp is just a defined method using a callback — Joppo
– Joppo, Commented Jan 13, 2014 at 16:01
the object returned by the anonymous function and assigned to userapp only has one property xproducttype and one method getXproducttype - in the code shown — Igor
– Igor, Commented Jan 13, 2014 at 16:04

Matt Greer · Accepted Answer · 2014-01-13 16:31:11Z

1

When you do this

return { xproducttype: xproducttype }

You've created a new, separate copy of it. The easiest solution is to always use the getter if possible. If not, you will need to stick xproducttype down inside an object and pass a reference to that object around.

Here is how to stick it inside an object:

var xproducttype = {
    value: 1000;
};

var getXproducttype = function() {
    return xproducttype.value;
};

return {
    xproducttype: xproducttype,
    getXproducttype: getXproducttype
};

userapp.ready(function() {
    // will now be the value you expect
    console.log('userapp.xproducttype: '+userapp.xproducttype.value);
});

JavaScript is always a pass by value language. The trick here is you are passing a reference to an object as your value. So you end up with two copies of the reference, that both point to the same object.

In other words: using an object in this case allows you to work with references instead of primitives.

edited Jan 13, 2014 at 16:31

answered Jan 13, 2014 at 15:46

Matt Greer

62.1k18 gold badges127 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joppo Over a year ago

thnx for your comment. Can you please elaborate on "If not, you will need to stick xproducttype down inside an object and pass a reference to that object around" - perhaps with an example?

Matt Greer Over a year ago

sure, I added more to my answer

Joppo Over a year ago

thnx for the further explennation (!)

Collectives™ on Stack Overflow

Accessing property of javascript object gives wrong value

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related