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?

Why not nestedArr[0] = targetArr? Why do you need to maintain insideArr as a reference to nestedArr[0]? — Phil
– Phil, Commented May 25, 2021 at 1:39
Got to say the close votes are ridiculously over-zealous. It's a perfectly valid question. — see sharper
– see sharper, Commented May 25, 2021 at 1:46
Related: Replace everything inside an Array with a new value, Is there a better way to retain your array but efficiently concat or replace items? — Bergi
– Bergi, Commented May 25, 2021 at 1:56
@ksav That's what I'm asking, I don't if this kind of editing will make the code less robust. — Spinik Lee
– Spinik Lee, Commented May 25, 2021 at 22:57

Phil · Accepted Answer · 2021-05-25 01:50:22Z

3

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; }

edited May 25, 2021 at 1:50

answered May 25, 2021 at 1:42

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

see sharper · Accepted Answer · 2021-05-25 02:34:14Z

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);

edited May 25, 2021 at 2:34

answered May 25, 2021 at 1:43

see sharper

12.2k8 gold badges53 silver badges68 bronze badges

5 Comments

see sharper Over a year ago

I prefer Phil's one-line answer using splice, but keeping this here to show there's more than one way to skin a cat.

Phil Over a year ago

Love the old .length = 0 trick. You could also use push instead of unshift (just because it's a more commonly understood method)

Bergi Over a year ago

@Phil Honestly my first guess would've been that unshift adds them in the wrong order

Phil Over a year ago

@Bergi same. I had to check the docs ~ "if multiple elements are passed as parameters, they're inserted in chunk at the beginning of the object, in the exact same order they were passed as parameters"

see sharper Over a year ago

Good point re being less well known, and honestly I'm not sure why I chose it over push! Added comment to code.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related