Array slice() gives reference rather than value

Question

I have a file where I'm exporting an object like this:

export const LINECHART2_DATA = {
    series: [{
        data: [],
        name: 'HR',
    },
    { 
        etc...
    }]
}

I'm importing it like this:

import { LINECHART2_DATA } from '../chart-options/options';

I have the following method:

prepareLineChartDataContainer(bed: BedDetails) {
//Clear data to prepare for new bed
if (bed.seriesContainer == null) {
  bed.seriesContainer = LINECHART2_DATA.series.slice();
} else {
  bed.seriesContainer.forEach(series => {
    series.data.length = 0;
  });
}
//Add data to seriesContainer
this.vitalSigns.forEach(vs => {
  bed.timeWindows.forEach(tw => {
    bed.seriesContainer.find(series => series.name == vs).data.push(tw['avg' + vs]);
  });
});
}

As you can see above, I'm slicing the series array from LINECHART2_DATA, then pushing some data to it. When a new bed is passed into the method with a null seriesContainer, it will be sliced once again, but this time it will contain the data that was added by the previous bed. Since I am using slice(), I was expecting to just get the value of LINECHART2_DATA, not the reference. What am I doing wrong?

Answer 1

From the documentation of Array.slice:

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.

So the behaviour you're seeing is a consequence of the shallow copy behavior of slice. If you need a deep copy so that you can freely mutate the objects without affecting the originals, you'll need to do that manually. The answers to this question show a few ways of doing so.