Function changing global variable

Question

I have this array that I pass into a function that's suppose to rotate the array 90 deg and return the result. I then want to check whether the new array is colliding with other things on the canvas.

let newArray = [
[0,0,1],
[1,1,1],   
[0,0,0]
];

let test = rotate(newArray);

if ( collision(test) ){
  draw(newArray);
} else {
  draw(test);
}

Here's the problem. I think rotate() is changing the newArray-variable so it doesn't matter what the if-statement evaluate to, the draw() function will always do the same thing.

I want to select the array to draw after checking if the rotated matrix collides with other stuff.

function rotate(matrix) {

matrix = matrix.reverse();

for (var i = 0; i < matrix.length; i++) {
 for (var j = 0; j < i; j++) {
  var temp = matrix[i][j];
  matrix[i][j] = matrix[j][i];
  matrix[j][i] = temp;
 }
}
return matrix
}


function collision(mat){

let collision = false;

for ( let i = 0; i < mat.length; i++){
for ( let j = 0; j < mat.length; j++){
  if (mat[i][j] == 1){
    let test = ctx.getImageData(x + 10*j +10, y + 10*i, 1, 1);
      if (test.data != "255,255,255,255" && test.data != "0,0,0,0"){
        collision = true;
      }
  }
 }
 }
return collision;
}

`I think rotate() is changing the newArray` - Where is function `rotate()` defined? Do you have the source code? If not, where is the documentation and what does that say? — Peter B, Sep 14 '18 at 14:50

score 0 · Accepted Answer · answered Sep 14 '18 at 15:11

So you are correct - the Array.reverse() method used in the rotate function does not return a new array, it modifies the same one (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse);

I'd suggest changing the rotate function to first clone the array that's passed to it and only then perform Array.reverse() etc..

You can clone this simple array passed into the rotate function in your example using let newMatrix = JSON.parse(JSON.stringify(matrix)); Then perform the remaining actions on the newMatrix and return that instead.

If you don't like this approach you could also create a new empty array and using a double for loop (a loop within a loop as you're working with 2D grids) populate the new array with values from the original one.

score 0 · Answer 2 · answered Sep 14 '18 at 15:43

Yes, your rotate function is altering your array, so it doesnt matter which if clause enters. Change it to this because you must clone your matrix.

function rotate(matrix) {

    newNatrix = matrix.slice().map( function(row){ return row.slice(); });

    for (var i = 0; i < newNatrix.length; i++) {
        for (var j = 0; j < i; j++) {
            var temp = newNatrix[i][j];
            newNatrix[i][j] = newNatrix[j][i];
            newNatrix[j][i] = temp;
        }
    }
    return newNatrix;
}

Function changing global variable

2 Answers2