Objects in Javascript Arrays Mysteriously Linked Together

Question

I have the following code.When I access w[1][0], I want only the object at that one location to be changed. However, all the objects change instead. I'm assuming this is because at some level, they are all pointing to the same object. How would I fix this?

 var createArray = function(dim,init){//takes an array of dimensions and the initial value of each element
    if(dim.length > 0){
        var x = new Array();
        for(var i = 0; i < dim[0]; i++)
            x[i] = createArray(dim.slice(1),init)
        return x;
    }
    return init;
}

var w = createArray([2,2],{top: false,left: false});
console.log(w);
w[1][0].left = true;
console.log(w);

Answer 1

In JavaScript, objects are passed by a reference , not by value . That means that if you pass the same object to a few variables, they all point to the same place in memory. This is why your init object is being changed everywhere.

To prevent this, you need to clone the object before assigning it to your variables. One of the simplest built-in methods is to use JSON, like this:

var copy = JSON.parse(JSON.stringify(original));

So in your case that would be it:

x[i] = createArray(dim.slice(1), JSON.parse(JSON.stringify(init)));

Answer 2

w[1][0].left = true;

This line is changing the only instance of the object. See, this line:

var w = createArray([2,2],{top: false,left: false});

is the only line in your code that creates a new object (of the type you're interested in) via the {} literal there. All other set operations ( newVar = init ) only copy a reference to that same object.

That sounds annoying, but it has a lot of good uses in code. To fix it, you'll want to create a copy each time, to replace the final line of createArray

var myCopy = {};
for (var key in origObject) {
  if (origObject.hasOwnProperty(key)) {
    myCopy[key] = origObject[key];
  }
}
return myCopy;

Be warned - this is a "shallow copy", so it will only copy the top-level properties, and any objects a level deep will still be references. Many JavaScript libraries have functions to create deep copies for you.