在不改变原始数组的情况下通过更新数组元素创建新数组

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)

Answer 1

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)