Javascript passing by reference instead of value? [duplicate]

Question

This question already has answers here:

Is JavaScript a pass-by-reference or pass-by-value language? (33 answers)

Closed 8 years ago.

Hello and thanks for help

When I was writing some code I ran into a problem. In the example below. I was expecting the alert(a.x) to output 1, instead it outputs 2. I have come to learn that it is because a is being passed to this.b as a reference. What I cannot seem to find, is how to pass it instead by value. (As in, I don't want to modify a every time I call x() )

var a = {"x":1}

function x() {
  this.b = v;
  this.b.x++;
}

x();

alert(a.x); //prints 2

I have also tried the following and other variants to no avail...

var a = {"x":1}

function x(v) {
  this.b = v;
  this.b.x++;
}

x(a);

alert(a.x); //... still prints 2

Can anyone clue me in on what I am missing?

Please and Thank You

(sidenote: this is a post that got to close to what I am talking about, but I couldn't figure out how to make it apply to my situation... if it is the same situation at all)

Answer 1

When you call:

x(a);

A few things are going on. First, the variable a (which simply holds a reference to an object) is passed by value to the function x. x now has its own copy of that reference, which happens to point to the same object in memory. Thus, any changes you make to properties on that referred object will affect other references to said object.

When you call:

this.b = v;

You're again making a copy of v and setting it to this.b. Now, a, v and this.b are distinct variables in memory, all storing a reference to the same object.

It seems what you're attempting to do is create a copy of the object itself, so you can manipulate one reference and not affect others. To do so, you'll need to create a completely new object in memory and copy over the properties.

var a = {"x":1}

function x(v) {
    this.b = {}; // Create a new object
    this.b.x = v.x; // Copy over the x property
    // Copy over any other properties too
    this.b.x++;
}

x(a);

alert(a.x); // The original object still has an x property of 1

Since this.b is a new object and we've merely copied over properties from the object referred to by v, incrementing this.b.x will have no effect on whatever v is pointing to.

Answer 2

So maybe I can provide you with some clarity by breaking down what's happening.

var a = {"x":1} // a refers to object with key "x"

function x(v) {  // v is now a reference to the object with key "x"
  this.b = v;   // this.b now is a reference to the object with key "x"
  this.b.x++;   //this.b.x++ points to the object with key "x" so it can increment it's value.
}

x(a);  // passes in a the value of reference to object with key "x"

alert(a.x); //... still prints 2

You can do something that could be found in this link:

var o = {};
(function(x){
    var obj = Object.create( x );
    obj.foo = 'foo';
    obj.bar = 'bar';
})(o);

alert( o.foo ); // undefined