JavaScript object property gets modified in a very interesting way

Question

I have put together a small test, can someone explain why does JavaScript do the following?

Why will testArr inherit the modifications of newArray?

var TestClass = function() {

            this.testArr = [10,11];

            this.addToArray = function() {
                var newArray = this.testArr;
                newArray.push(12);
            }
        }

        var testClass = new TestClass();

        testClass.addToArray();

        console.log(testClass.testArr); // will be [10, 11, 12]

score 8 · Accepted Answer · edited May 23 '17 at 12:07

8

Because they're the same array. Variables contain references to arrays. You're assigning that reference to a new variable, and now both variables point to the same array.

Here's a much simpler test which reproduces the behavior:

x = [1, 2]     // the value of x is a reference to an array
y = x          // the value of y is a reference to the same array
y.push(3)      // modify the array pointed to by both variables
console.log(x) // [1, 2, 3]

If you want to create a new array, you need to clone the array.

edited May 23 '17 at 12:07

Community

1
1

answered Jun 30 '14 at 19:28

user229044

232,980
40
330
338

What can I do to avoid it? really interesting – Dany D Jun 30 '14 at 19:30
Ty very much, what do you think is the best way to clone the array? – Dany D Jun 30 '14 at 19:33
I included a link in my answer which explains it pretty clearly. – user229044 Jun 30 '14 at 19:35

score 0 · Answer 2 · answered Jun 30 '14 at 19:39

With following statement

var newArray = this.testArr;

You will not copy the values from inside testArr. You will create a reference to this array. When you make an adjustment to a reference you will automatically change the referenced source too.

When you want to copy the values from testArr to another variable you can do this instead.

var newArray = this.testArr.slice();

This will copy the values from testArr inside newArray.

JavaScript object property gets modified in a very interesting way

2 Answers2