Why JavaScript changes values of whole the array column?

Question

I'm trying to create a 2D array of certain dimensions - 26x2. I'm doing it with 2 for loops. Then I try to change certain element but it changes whole the array column.

Can anybody explain why it happens?

function convertTable() {
                var colsNum = 2;
                var rowsNum = 26;
                var rowCounter = [];
                for (var i = 0; i < colsNum; i++) {
                    rowCounter.push(0);
                }
                var counterArray = [];
                var colCounter = rowCounter;
                for (var i = 0; i < rowsNum; i++) {
                    counterArray.push(colCounter);
                }
                document.write(counterArray);
                document.write("<br>");
                counterArray[0][0] = 1;
                counterArray[0][1] = 2;
                counterArray[1][0] = 10;
                counterArray[1][1] = 20;
                document.write(counterArray);
            }

<!DOCTYPE html>
<html>
    <body onload="convertTable()"></body>
</html>

You are pushing the same rowCounters into your array. Keep in mind that rowCounter is a reference to your array. — Derek 朕會功夫
– Derek 朕會功夫, Commented Apr 29, 2017 at 23:15
Is there a way to assign not the refference to array but it's values? — Андрій Бойко
– Андрій Бойко, Commented Apr 29, 2017 at 23:32

Derek 朕會功夫 · Accepted Answer · 2017-04-29 23:41:26Z

2

for (var i = 0; i < rowsNum; i++) {
    counterArray.push(colCounter);
}

What you are doing here is pushing the same reference to your row repeatedly, so your 2D array looks like this:

| ref#1 |
| ref#1 |             ref#1 = [0, 0, ..., 0]
   ...
| ref#1 |

What you actually want, however, is something like this:

| ref#1  |             ref#1  = [0, 0, ..., 0]
| ref#2  |             ref#2  = [0, 0, ..., 0]
   ...
| ref#26 |             ref#26 = [0, 0, ..., 0]

And therefore, you should create a new array before you push it in:

var colsNum = 2;
var rowsNum = 26;

var matrix = []
for(var row = 0; row < rowsNum; row++) {
    var rowArray = []
    for(var col = 0; col < colsNum; col++) {
        rowArray.push(0);
    }
    matrix.push(rowArray);
}

answered Apr 29, 2017 at 23:41

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

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

Collectives™ on Stack Overflow

Why JavaScript changes values of whole the array column?

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