Creating new array with updating array element without mutating the original array

Question

This is the array and I want to replace the elements "A" and "B" with "D". I don't want to mutate the original array , So I have used spread operator. But still my original array getting mutating whenever I will update the newArr. I want originalArray should be [["A", 2],["B",1]] and newArr should be [["D", 2],["D",1]] Can anyone suggest me the solution for this

let originalArray = [["A", 2],["B",1]];
 let newArr = [ ...originalArray  ];
    for(let i=0;i<newArr.length;i++){
     newArr[i][0] = "D";
    }
    console.log(originalArray )
    console.log(newArr)

Does this answer your question? [Create copy of multi-dimensional array, not reference - JavaScript](https://stackoverflow.com/questions/13756482/create-copy-of-multi-dimensional-array-not-reference-javascript) — pilchard, Mar 26 '22 at 10:45
As of 2022 there is now a built in deep clone method [`structuredClone()`](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) in which case instead of using spread syntax you would just `const newArr = structuredClone(originalArray);` — pilchard, Mar 26 '22 at 10:47

score 2 · Accepted Answer · answered Mar 26 '22 at 10:09

Spreading does not imply a deep copy. You have a two dimensional array so when you spread the top level, the nested arrays are still referencing the original array:

let originalArray = [["A", 2], ["B",1]];
let newArr = [...originalArray];

console.log(originalArray[0] === newArr[0]) // true

the simplest change necessary is to also spread the nested array

let originalArray = [["A", 2], ["B",1]];
let newArr = [...originalArray];
for(let i = 0; i < newArr.length; i++) {
    newArr[i] = ["D", ...newArr[i].slice(1)]; // make a copy here as well using slice and omitting the first element
}
console.log(originalArray )
console.log(newArr)

Creating new array with updating array element without mutating the original array

1 Answers1