Does Javascript slice method return a shallow copy?

Question

In a Mozilla developer translated Korean lang says 'slice method' returns a new array copied shallowly.

so I tested my code.

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

var t = animals.slice(2,4);
console.log(t);

t[0] = 'aaa';
console.log(t);
console.log(animals);

but, If slice method returns shallow array, the animals array should be changed with ['ant', 'bison', 'aaa', 'duck', 'elephant'].

Why is it shallow copy?

Monck

Didn't you just cite the documentation that states it is a shallow copy and does not change the original? I don't get your question. – Droplet

@Droplet I think the documentation reads like a contradiction. A shallow copy has the same memory address as the old one. Hence, any change made to either of them changes the attributes for both. But in the example above it doesn't happen. – Pity

@sunwarri0r "A shallow copy has the same memory address as the old one" - no, it doesn't? Where are you reading that? – Droplet

I think it is the understanding of the author, that's why he was asking this question. Also my comment was wrong, I hope this article helps also others en.m.wikipedia.org/wiki/Object_copying#Shallow_copy – Pity

Answer 1

slice does not alter the original array. It returns a shallow copy of elements from the original array.

Elements of the original array are copied into the returned array as follows:

For object references (and not the actual object), slice copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.

For strings, numbers and booleans (not String, Number and Boolean objects), slice copies the values into the new array. Changes to the string, number or boolean in one array do not affect the other array. If a new element is added to either array, the other array is not affected.(source)

In your case the the array consists of strings which on slice would return new strings copied to the array thus is a shallow copy. In order to avoid this use the object form of array.

Pegg

Answer 2

strings are primitive types in JavaScript, so you will get a new array with new strings inside.

Your test array should be an array of objects:

var animals = [{name: 'ant'}, {name: 'bison'}, {name: 'camel'}, {name: 'duck'}, {name: 'elephant'}];

var t = animals.slice(2,4);
console.log(t);

t[0].name = 'aaa';
console.log(t);
console.log(animals);

Charlatanism

Answer 3

I think this article may help: For example, if in a shallow copy named copy of an array object, the value of the copy[0] element is {"list":["butter","flour"]}, and you do copy[0].list = ["oil","flour"], then the corresponding element in the source object will change, too — because you selectively changed a property of an object shared by both the source object and the shallow copy.

However, if instead you do copy[0] = {"list":["oil","flour"]}, then the corresponding element in the source object will not change — because in that case, you're not just selectively changing a property of an existing array element that the shallow copy shares with the source object; instead you're actually assigning a completely new value to that copy[0] array element, just in the shallow copy.

Haro

Answer 4

May be you are looking for this. Try this!

let animals = ['ant', 'bison', 'camel', [1, 2]];

let t = animals.slice();

t[0] = 'aaa';    // string (primitive datatype)
t[t.length-1][0] = 0;    // array (object)

console.log(t);
console.log(animals);

In case of a shallow copy-

• Objects will reflect change in the original place from where they were shallowly copied because they are stored as references (to their address in the Heap).
• Primitive data types will NOT reflect change in the original place because they are directly stored in the callstack (in Execution Contexts).

Myca