Adding a new entry to a multidimensional javascript array

Question

All the examples that I have seen on this site suggest that I should be able to do this:

var multiArray = []
var singleArray = []
singleArray[0] = "10"
singleArray[1] = "11"
multiArray.push(singleArray)
singleArray[0] = "20"
singleArray[1] = "21"
multiArray.push(singleArray)

and I would expect multiArray to contain:

["10", "11"]["20", "21"}

In fact it contains:

["20", "21"]["20", "21"}

It looks as though multiArray holds a reference to singleArray rather than the data. So changing the contents of singleArray affects both entries in multiArray.

Have I made a very basic error or is there some workaround for this?

Thanks for any help.

• zerkms: Arrays are passed by reference, so you're modifying the original array. Just create another one and you'll be fine
• Felix Kling: FWIW: multiArray.push([10,11], [20,21]). "It looks as though multiArray holds a reference to singleArray rather than the data." Yep, your are absolutely right.

Answer 1

Lots of ways to do this and get what you want . . . the other two answers will do it, as will these two approaches:

multiArray.push(["10", "11"]);
multiArray.push(["20", "21"]);

. . . and . . .

multiArray.push(new Array("10", "11"));
multiArray.push(new Array("20", "21"));

Both result in an array of: [["10", "11"], ["20", "21"]]

In the end, the important thing is that you need to create a new array instance for each set of values that you store, since the outer array will just be storing pointers to each inner array that it contains.

• talemyn: @EnjoysTurtles . . . slice would work fine too (that's why I said the other two answers will do it at the beginning of my answer). Where did he say that he wants to use a single array? I just see that he happened to use one in the original post . . .
• talemyn: Why have we all gotten downvotes? All of these approaches solve the issue that he is seeing . . .
• talemyn: @EnjoysTurtles - HTML5 fails on a lot more than 3.5% of browsers, but a lot of people still use it. ;) I wasn't saying that the JSON approach was THE solution or that I would even use it, but it will do the job in a lot of instances. As for my answers, I was just showing an alternate ways of accomplishing what he appears to be trying do. I didn't see any requirement to use a single array to store the values, so I provided some other approaches.
• talemyn: @EnjoysTurtles - you're willing to make a lot more assumptions about his situation than I am. :D He asked why it was behaving that way and the general response (accurately) was because pushing the array creates a pointer to it. I thought my way was the most straightforward way of illustrating that the stored arrays have to be unique and independent. .slice() may be the most efficient, but it's certainly not the most intuitive way of explaining why his code wasn't working (especially to a new guy . . . shoot, I didn't know what .slice() did when I first got started LOL ).
• talemyn: @VivinPaliath - I up-voted both of you . . . all three answers address his question accurately. :)

Answer 2

You're not pushing in a copy of the array. You're pushing in a copy of the reference to the array. Since the copies all point to the same array, you are seeing it twice.

You can simply do this:

multiArray.push([10,11], [20,21])

(削除) Another way is to do this:

multiArray.push(JSON.parse(JSON.stringify(singleArray)));

Here you're stringifying the array and then parsing it again, in effect creating a new array. A kind of "cloning", if you will. (削除ここまで)

Using slice is a better alternative for this particular scenario:

multiArray.push(singleArray.slice(0));

• Andrew Templeton: Array.prototype.slice(0) is far better for a simple Array, plus JSON isn't even defined on a lot of non ECMA5 browsers.
• Vivin Paliath: @EnjoysTurtles Maybe you should take a look at this for JSON support. Yes, slice is better; I didn't notice it in the original question.
• Andrew Templeton: IE 6 and 7, yeah, exactly. Do you want to totally fail on 3.5% of users?? Also, that's just a terrible way to clone a simple array in general. w3schools.com/browsers/browsers_explorer.asp
• Vivin Paliath: @EnjoysTurtles Sure, if you want to support browsers that the vendors themselves have dropped support for. There are hundreds of things that don't work on IE 6 and 7; JSON is the least of them. Seriously; 3.5%? If you're still browsing the web on IE 6 and 7 expect to have a lot of things broken. Unless you're using it because of a legacy application you really shouldn't be using IE 6 or 7 to browser the web. I'm not going to spend 95% of my time trying to ensure browser compatibility for 3.5%
• Vivin Paliath: "Salesforce.com supports IE6 for 95% of features [...] because their IE6 users offer tons of revenue" - that is the only reason. You can't make a blanket statement that says "support everything all the time". It depends on the cost-to-benefit ratio. Salesforce has a bunch of customers who use IE 6 because most of their customers are corporations with a huge amount of investment in legacy tech (especially ActiveX). These things only work in IE6. It completely depends on your customer profile.

Answer 3

It's an object reference problem - Arrays are objects, so when you modify [0] and [1], you're modifying it in both places. Use a slice to copy the contents:

var multiArray = [],
 singleArray = [];
singleArray[0] = "10";
singleArray[1] = "11";
multiArray.push(singleArray.slice(0));
singleArray[0] = "20";
singleArray[1] = "21";
multiArray.push(singleArray);
console.log(multiArray); // [["10", "11"], ["20", "21"]]

• Andrew Templeton: Why the downvote? This is the best practice for a simple array.