According the MDN documentation calling array.slice()
will create a shallow copy of the array.
See this MDN link for slice().
However, if I run a simple test as such in the console:
var test = [[1,2,3],7,8,9];
var shallow_copy = test.slice();
and inspect shallow_copy, I can see that the entire 2 dimensional array appears to be copied over.
What is the difference between a shallow copy and a deep copy? If I were to guess, I would have called this a deep copy.
To see the difference, try:
shallow_copy[0][2] = 4;
console.dir(test);
You'll see that test
has been modified! This is because while you may have copied the values to the new array, the nested array is still the same one.
A deep copy would recursively perform shallow copies until everything is a new copy of the original.
Basically you're just getting a reference to the original variable/array. Changing the reference will also change the original array. You need to loop over the values of the original array and form a copy.
Consider this example:
var orig = { a: 'A', b: 'B', c: 'C' };
Let's say you want to create a duplicate of this, so that even if you change the original values, you can always return to the original.
I can do this:
var dup = orig; //Shallow copy!
If we change a value:
dup.a = 'Apple';
This statement will also change a
from orig
, since we have a shallow copy, or a reference to var orig
. This means, you're losing the original data as well.
But, creating a brand new variable by using the properties from the original orig
variable, you can create a deep copy.
var dup = { a: orig.a, b: orig.b, c: orig.c }; //Deep copy!
Now if you change dup.a
, it will only affect dup
and not orig
.
test[0] === shallow_copy[0]
, they refer to the same array object - Bergi 2014-07-01 15:11