Why is my function appending total attribute to all my separate arrays?

Question

I have 3 array's that are copies of each other using slice(). After declaring each, I only append an attribute to data array called 'total'. When I console log, all the declared arrays have the new attribute 'total' present. Why is this? The only variable that should have total attribute is data. I used slice because that create a new separate array for each variable.

 const cData = (4093) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
 {…}, {…}, {…}, …];
  //Side note: cData is actually an array of objects with key values
  //cData[2] would look like the below code.
  {Area: "NORTHEAST AREA", District: "CONNECTICUT CS 
  DISTRICTCT", Unit: "WORTHINGTON", Finance Number: "249656", Zip: 
  "01026", …}

 const data = cData.slice();
 var dataArea = data.slice();

 data[2]['total'] = 22; //When I console log all 3 variables have 
                        //total attribute appended

 console.log(cData[2]);            //When I console.log, all 3 variables 
 console.log(data[2]); //have total attribute appended
 console.log(dataArea[2]);

Why is this the case? Slice creates new array for each varible. I was expecting that only the variable 'data' would have appended total.

The `.slice()` method returns a *shallow copy* of the array. The arrays are copies, but the objects in them are shared. — Pointy, May 13 '19 at 14:36
Possible duplicate of [Making changes to a copied array, updates the original?](https://stackoverflow.com/questions/48529399/making-changes-to-a-copied-array-updates-the-original) — adiga, May 13 '19 at 14:39
Possible duplicate of [Why does changing an Array in JavaScript affect copies of the array?](https://stackoverflow.com/questions/6612385/why-does-changing-an-array-in-javascript-affect-copies-of-the-array) — VLAZ, May 13 '19 at 14:43
Please read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Description) — Cid, May 13 '19 at 14:51
[this answer](https://stackoverflow.com/a/49473522/8398549) from the duplicate will help you to clone your array — Cid, May 13 '19 at 14:52

score 0 · Answer 1 · answered May 13 '19 at 14:50

Since slice is creating a shallow copy of the original array , You can use JSON.parse & JSON.stringify to create a deep copy and then add new key to the array

let cData = [{
  Area: "NORTHEAST AREA",
  District: "CONNECTICUT CS DISTRICTCT",
  Unit: "WORTHINGTON ",
  FinanceNumber: "249656 ",
  Zip: "01026"
}, {
  Area: "NORTHEAST AREA",
  District: "CONNECTICUT CS DISTRICTCT",
  Unit: "WORTHINGTON ",
  FinanceNumber: "249656 ",
  Zip: "01026"
}, {
  Area: "NORTHEAST AREA",
  District: "CONNECTICUT CS DISTRICTCT",
  Unit: "WORTHINGTON ",
  FinanceNumber: "249656 ",
  Zip: "01026"
}]

const data = JSON.parse(JSON.stringify(cData))

data[2]['total'] = 22;

console.log(cData[2]);
console.log(data[2]);

Why is my function appending total attribute to all my separate arrays?

1 Answers1