This is a bit of an amateur mistake, but I definitely wasn’t the first person to make it and I suspect I won’t be the last. I had a JavaScript array that I wanted to copy, then make some change to the copy, so that I could access the original and the modified copy. Therefore, being used to PHP, I did the following, assuming it would make a ‘proper’ copy of the original:
var original = [1,2,3]; //Define original array var copy = original; //Attempt to copy original copy[2] = 4; //Modify the copy alert(original[2]); //Hoped for 3, got 4
I’d created a reference to the original array, rather than a copy of it. As a result, updating the copy also updated the original.
So, how do I create a copy of an array, rather than a reference. Thankfully, the slice method makes this very easy:
var original = [1,2,3]; //Define original array var copy = original.slice(0); //Copy original using slice copy[2] = 4; //Modify the copy alert(original[2]); //Got 3 this time
This works fine for simple, one-dimensional arrays, where the array contains only booleans, numbers or strings. If the array is multi-dimensional, i.e. it contains other arrays or objects, then only the top level array will be copied, the arrays/objects it contains will be referenced. Therefore, it is necessary to create a function to do this – this seems to be a good way to do: http://my.opera.com/GreyWyvern/blog/show.dml/1725165
Alternatively, use jQuery, and take advantage of the extend method:
var original = {team:"Arsenal"}; //Define original object
var copy = jQuery.extend(true, {}, original); //Copy original using extend
copy.team = "Man Utd" ; //Modify the copy
alert(original.team); //Alerts Arsenal