Unexpected value change in 2D array in JavaScript

Question

I'm trying to modify one value in a 2D array. However I'm finding some weird behavior based on how the array is constructed.

The only difference between matrix and matrix2 is how they're constructed. However when I change the [1][1] value, all of the [x][1] values in matrix2 are changed:

Matrix:

[ [ 0, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 0 ] ]

Matrix2 (unexpected):

[ [ 0, 1, 0 ], [ 0, 1, 0 ], [ 0, 1, 0 ] ]

Code:

var row = [0,0,0];
var matrix = [[0,0,0],[0,0,0],[0,0,0]];
var matrix2 = [row, row, row];
console.log(matrix);
console.log(matrix2);
matrix[1][1] = 1;
matrix2[1][1] = 1;
console.log(matrix);
console.log(matrix2);

Can anyone explain what's going on?

matrix2 has three elements, each of which refers to the same array. Simple test: matrix2[0] === matrix2[1] results in true. — Felix Kling
– Felix Kling, Commented Aug 13, 2013 at 21:14

SLaks · Accepted Answer · 2013-08-13 21:14:11Z

2

[row, row, row]

You just made an array with three references to the same inner array.

Changes to the inner array can be seen through any reference to it.

You want to create three copies of the inner array.
You can create a shallow copy of an array by calling .slice().

answered Aug 13, 2013 at 21:14

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Collectives™ on Stack Overflow

Unexpected value change in 2D array in JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related