Strange return value of Array after splice this

Question

I have a problem when i want dupplicate an object in array.

Example Array:

const fruits = [
  {"name": "banana", "index": 0},
  {"name": "orange", "index": 1},
  {"name": "lemon", "index": 2}
];

I want to dupplicate 1 fruit and reorder their index with a function;

duplicate = (index) => { 
  const newList = [...fruits];

  const newFruit = fruits[index];

  newList.splice(index + 1, 0, newFruit);

  for(let i = 0; i < newList.length; i++) {
    newList[i].index = i
  };

  return newArray;
};

But the function "duplicate(1);" return this:

[
  {"name": "banana", "index": 0},
  {"name": "orange", "index": 2},
  {"name": "orange", "index": 2},
  {"name": "lemon", "index": 3}
]

Instead of:

[
  {"name": "banana", "index": 0},
  {"name": "orange", "index": 1},
  {"name": "orange", "index": 2},
  {"name": "lemon", "index": 3}
]

And I don't understand why ?

because you do not have a copy of the object. It is the same object in two indexes. `newList.splice(index + 1, 0, { ...newFruit });` — epascarello, Feb 24 '23 at 15:33

Josal · Accepted Answer · 2023-02-25T09:17:28.527

That is because you have incorrectly copied the value of the array of objects.

The spread operator will create a deep copy of the topmost data and a shallow copy of the nested data.

const newList = [...fruits];

so the above line creates a shallow copy of the array

Solution:-

const newFruit = {
    ...fruits[index]
};

The above code will get the deep copy of the required object, which will make the program work as expected.

const fruits = [
  {"name": "banana", "index": 0},
  {"name": "orange", "index": 1},
  {"name": "lemon", "index": 2}
]

const duplicate = (index) => { 
  const newList = [...fruits];

  const newFruit = {
        ...fruits[index]
    };

  newList.splice(index + 1, 0, newFruit);

  for(let i = 0; i < newList.length; i++) {
    newList[i].index = i
  };

  return newList;
};

It doesn't create a deep copy of anything, it creates a shallow copy of the array — pilchard, Feb 24 '23 at 16:22

score 0 · Answer 2 · answered Feb 24 '23 at 16:12

you returns an empty array because you're not deleting anything, create a deep copy of the original array using JSON.parse() and JSON.stringify() before modifying

const fruits = [
  {"name": "banana", "index": 0},
  {"name": "orange", "index": 1},
  {"name": "lemon", "index": 2}
];

const duplicate = (index) => {
  const newList = JSON.parse(JSON.stringify(fruits)); // create a deep copy of the original array

  const newFruit = newList[index]; // get the fruit to be duplicated

  newList.splice(index + 1, 0, JSON.parse(JSON.stringify(newFruit))); // insert the duplicated fruit

  for (let i = 0; i < newList.length; i++) {
    newList[i].index = i;
  }

  console.log(`Original array: ${JSON.stringify(fruits)}`);
  console.log(`New duplicated array: ${JSON.stringify(newList)}`);

  return newList;
};

duplicate(1);

There are better methods of deep cloning that don't risk data loss [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — pilchard, Feb 24 '23 at 16:24

Strange return value of Array after splice this

2 Answers2