Javascript 2-dimensional array: incrementing a specific item's value

Question

I have a 2 dimensional array, with integers, and all what I want is to increment a particular item with a number. The initial state:

var arr1=[];
var arr2=[1,2,3];
arr1.push(arr2);
arr1.push(arr2);
arr1.push(arr2);

arr1 now looks like this:

0:[1, 2, 3]
1:[1, 2, 3]
2:[1, 2, 3]

What I want is to increment the [0,0] element of this array with 10, so arr1 should be:

0:[11, 2, 3]
1:[1, 2, 3]
2:[1, 2, 3]

What I did:

arr1[0][0]+=10;

But this way the result is:

0:[11,2,3]
1:[11,2,3]
2:[11,2,3]

What am I missing? Why increments this command all the numbers at position 0 of the array elements?

you should make a copy of your arr2 before push it inside arr1... — Kurohige
– Kurohige, Commented Dec 7, 2018 at 22:18

Scott Hunter · Accepted Answer · 2018-12-07 22:18:33Z

3

Because every element of arr1 is the same array, so a change to one is a change to all.

answered Dec 7, 2018 at 22:18

Scott Hunter

50k12 gold badges64 silver badges107 bronze badges

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

Comments

Dale Baker · Accepted Answer · 2018-12-07 22:21:05Z

0

Try this:

var arr1=[];
arr1.push([1,2,3]);
arr1.push([1,2,3]);
arr1.push([1,2,3]);

arr1[0][0]+=10;

That will give you the desired result.

Your issue is that you've got the same reference to an object three times and when you change that object's value, all references to that object will display the updated value.

answered Dec 7, 2018 at 22:21

Dale Baker

3391 gold badge3 silver badges14 bronze badges

Comments

Croolsby · Accepted Answer · 2018-12-07 22:22:26Z

0

When you run var arr2=[1,2,3];, It will instantiate an object and assign it to arr2.

When you run arr1.push(arr2), you are pushing a reference to that object assigned to arr2.

In other words, arr1[0] === arr1[1] === arr1[2].

What you need to do is

var arr1=[];
arr1.push([1,2,3]);
arr1.push([1,2,3]);
arr1.push([1,2,3]);

answered Dec 7, 2018 at 22:22

Croolsby

1,4761 gold badge14 silver badges15 bronze badges

2 Comments

AndrasU Over a year ago

OK, I got this, but the data what I have to push to arr1 comes as a result of a for loop, which loop fills arr2, and once it is done, I have to push it to arr1. That part of knowledge was missing, that only a reference will be pushed to arr1 this way, that's why not only the [0,0] value is incremented, if I did it the way I described...

Croolsby Over a year ago

In your loop, make sure you create a brand new array for arr2. You must call arr2 = [] inside the loop before you add values to it, like doing arr2[0] = 1, arr2[1] = 2, etc. If you do not call arr2 = [], then it will never create a new array object, and it will just reuse the same array by overwritting existing values in the array.

TeaNyan · Accepted Answer · 2018-12-07 22:26:10Z

0

That is happening because you are not pushing a copy of arr2 into arr1, but a reference (pointer) to arr2, which means that you are editing the same array over again.

To avoid that, you should be using spread.

Instead of arr1.push(arr2) do arr1.push([...arr2])

Here is a JSFiddle with output:

0: Array(3) [ 11, 2, 3 ]

1: Array(3) [ 1, 2, 3 ]

2: Array(3) [ 1, 2, 3 ]

answered Dec 7, 2018 at 22:26

TeaNyan

5,0895 gold badges19 silver badges32 bronze badges

1 Comment

AndrasU Over a year ago

Thanks, this solved my problem, and again, learnt something new...:-)

Kresimir · Accepted Answer · 2018-12-07 22:35:30Z

0

When you assign an array to a variable, you are not making a copy of the array.

let arr1 = [1,2,3];
let arr2 = arr1;      // This does NOT create a copy of the array!

console.log(arr1[0]);

arr2[0] = "BOOM!";     // change arr2

console.log(arr1[0]);  // displays "BOOM!" not 1 - arr1 is changed, too!

This is because both arr1 and arr2 are pointing to the same array.

edited Dec 7, 2018 at 22:35

answered Dec 7, 2018 at 22:20

Kresimir

8076 silver badges21 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2018-12-07 22:20:34Z

-1

Objects (Arrays are Objects too) are passed as references. That means that your array looks like this (pseudostructure):

 arr2 -> [1, 2, 3]
 arr1 -> [ -> arr2, -> arr2 -> arr2]

Therefore arr1[0] is just the same as arr1[1] or arr2. To create three different arrays copy the array:

 arr1.push([...arr2]);

answered Dec 7, 2018 at 22:20

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

AndrasU Over a year ago

thanks, this syntax (spread) was new to me, but now I know...:-)

Collectives™ on Stack Overflow

Javascript 2-dimensional array: incrementing a specific item's value

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related