In JS, why does the slice() documentation say it is a shallow copy when it looks like a deep copy?

Question

According to the docs for Array.prototype.slice() in JavaScript, the slice() method returns a shallow copy of a portion of an array into a new array. It is my under

Answer 1

In this case the shallow copy means that the nested objects will be pointing to the original values. So by modifying nested objects in the sliced array, you will mutate the original.

It's better to see on the example:

var originalArray = [1, [2, 3], 4];
var slicedArray = originalArray.slice();
var nestedArray = slicedArray[1]; // [2, 3]
nestedArray.push("oh no, I mutated the original array!");
console.log(originalArray); // [1, [2, 3, "oh no, I mutated the original array!"], 4]

Answer 2

It's doing a shallow copy. But the values in that shallow copy point to the original arrays/objects, because they're object references.

So let's say we have:

var orig = [ [1] ];

In memory we have:

                    +−−−−−−−−−−−−−+
[orig:Ref22157]−−−−>|   (array)   |
                    +−−−−−−−−−−−−−+        +−−−−−−−−−−−−−+
                    | 0: Ref84572 |−−−−−−−>|   (array)   |
                    +−−−−−−−−−−−−−+        +−−−−−−−−−−−−−+
                                           | 0: 1        |
                                           +−−−−−−−−−−−−−+

Now we do:

var copy = orig.slice();

and have:

                    +−−−−−−−−−−−−−+
[orig:Ref22157]−−−−>|   (array)   |
                    +−−−−−−−−−−−−−+   
                    | 0: Ref84572 |−−−+
                    +−−−−−−−−−−−−−+   |
                                      |
                                      |    +−−−−−−−−−−−−−+
                                      +−−−>|   (array)   |
                    +−−−−−−−−−−−−−+   |    +−−−−−−−−−−−−−+
[copy:Ref54682]−−−−>|   (array)   |   |    | 0: 1        |
                    +−−−−−−−−−−−−−+   |    +−−−−−−−−−−−−−+
                    | 0: Ref84572 |−−−+
                    +−−−−−−−−−−−−−+

Notice how the reference to the nested array (shown here notionally as "Ref84572" but we never see the real values of object references) has been copied, but still refers to the same nested array.

Here's proof it's shallow:

var orig = [ [1] ];
var copy = orig.slice();
console.log("orig[0][0] = " + orig[0][0]);
console.log("copy[0][0] = " + copy[0][0]);
console.log("Setting copy[0][0] to 2");
copy[0][0] = 2;
console.log("orig[0][0] = " + orig[0][0]);
console.log("copy[0][0] = " + copy[0][0]);

Notice that when we modify the state of the nested array, we see that modification no matter which route we take to getting to it (orig[0][0] or copy[0][0]).

Answer 3

slice is a shallow copy not because nested values are ignored, but because they contain references to the original arrays, and thus are still linked. For example:

let arr = [1, [2]]
let shallowCopy = arr.slice(0, arr.length);
shallowCopy[1][0] = "foobar";

// will print "foobar", because the nested array is just a reference
console.log(arr[1][0]);