Why array changes while no code touch it?

Question

I have two arrays in my code, named res_matrix and original_matrix.

The orginial_matrix is an m*n matrix filled with "false" in each cell.

Then let res_matrix = orginial_matrix.

My code does all the calculations using res_matrix, not even touch the orginial_matrix.

But I see from the console log, orginial_matrix also changed.

Anyone can please tell me where I did wrong? Thanks.

board = [["a","b"]];
word = "ba";

var exist = function(board, word) {
    
    let res = [], res_matrix = [], original_matrix = [];
    if (board.length === 0) {
        return false;
    } else {
        h = board.length;
        w = board[0].length;
        
        for (let x = 0; x < h; x++) {
            var row = [];
            for (let y = 0; y < w; y++) {
                row.push(false);
            }
            original_matrix.push(row);
        }
        
        for (let i = 0; i<h;i++) {
            for (let j=0;j<w;j++) {
                res_matrix = original_matrix;
                
                if (j===0) {
                    console.log("111111111", original_matrix);
                } else if (j===1) {
                    console.log("2222222", original_matrix);
                }
                if (dfs(i,j,0)) {
                    return true;
                }
            }
        }
        return false;
    }
    
    function dfs(i,j, index) {
        
        if (index === word.length) {
            console.log('founded')
            return true;
        }
        
        console.log(i,j, index, word[index], res_matrix);
        
        if (i>=0 && i < h && j < w && j >= 0 && !res_matrix[i][j] && 
        index<=word.length) {
            
            res_matrix[i][j] = true;
            
            if (board[i][j] === word[index]) {
                if (dfs(i+1,j,index+1) ||
                    dfs(i-1,j,index+1) ||
                    dfs(i,j+1,index+1) ||
                    dfs(i,j-1,index+1)) {
                    return true;
                }
                
            }
        }
        return false;
    }
};


exist(board, word);

The console log look like this. [ [ false, false ] ] after 1111111 is correct. But when I output 2222222, the original_matrix become [ [ true, false ] ].

111111111 [ [ false, false ] ]
0 0 0 b [ [ false, false ] ]
2222222 [ [ true, false ] ]
0 1 0 b [ [ true, false ] ]
1 1 1 a [ [ true, true ] ]
-1 1 1 a [ [ true, true ] ]
0 2 1 a [ [ true, true ] ]
0 0 1 a [ [ true, true ] ]

You can see and run the code here: https://repl.it/join/owahoxnf-57659

Answer 1

Setting two arrays equivalent to each other doesn't make a copy of the array, it copies the reference. Same thing with all objects (such as arrays, objects or class instances). When you create a new variable with a value of the old variable, updating any variable with the reference.

var a = ['some', 'random', 'elements'];
var b = a;
var c = a;
var d = b;

d.push('another element');
b.push('one more element');
c.push('one last element');

console.log(a);
console.log(b);
console.log(c);
console.log(d);

If you take a look at this code, you will notice that all four arrays (a, b, c, and d) are all equivalent at the end, even though three times three different variables were updated. This is because they all share the same reference. Datatypes such as strings and numbers do not share references, they create a copy. See the example below:

var a = 'hello';
var b = a;

b = 'goodbye';

console.log(a);
console.log(b);

If you run this code, you will notice that a is still hello, and only b has changed to 'goodbye'.

Since you have a multidimensional array, the easiest way to do this for you is to simply convert the object to a json string using JSON.stringify() and parse it immediately with JSON.parse(). This works only for nested objects and not functions. Running var arrCopy = JSON.parse(JSON.stringify(arr)); will create a copy of the array and not the reference, and therefore updating arrCopy will not update arr.