Javascript: How to modify each element in array without changing the reference

Question

let nestedArr = [[0,0],[0,0]]
let insideArr = nestedArr[0]
let targetArr = [1,1]

Basically I want to change the insideArr's elements to equal to targetArr, and it should change the first element of nestedArr too (because insideArr is refering to that).

insideArr = targetArr
insideArr = [..targetArr]

Above 2 approaches won't work because it will make insideArr pointing to new reference. I know using forEach to loop through insideArr and assign it one by one should work, but is there a better way? And BTW, should I avoid this kind of usage?

Answer 1

If you must maintain insideArr as a reference to nestedArr[0], you can use Array.prototype.splice() to mutate insideArr

let nestedArr = [[0,0],[0,0]]
let insideArr = nestedArr[0]
let targetArr = [1,1]

// Replace all of insideArr with targetArr
insideArr.splice(0, insideArr.length, ...targetArr)

console.log("still the same reference?", insideArr === nestedArr[0])
console.log("insideArr:", insideArr)
console.log("nestedArr:", nestedArr)

.as-console-wrapper { max-height: 100% !important; }

Answer 2

Assuming you have good reasons for keeping the reference the same - and sometimes there are, you can do:

let nestedArr = [
  [0, 0],
  [0, 0]
];
let insideArr = nestedArr[0];
let targetArr = [1, 1];
insideArr.length = 0;
insideArr.unshift(...targetArr); // insideArr.push(...targetArr) works fine too
console.log(nestedArr);