Does Javascript slice method return a shallow copy?

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?


Solution 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.

Solution 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);