javascript console.log give wrong result in variable

Question

var cols = 9;
var rows = 9;
var matrix_empty = [];

for (var x = 0; x < cols; x++) {
    matrix_empty[x] = [];
    for (var y = 0; y < rows; y++) {
        matrix_empty[x][y] = -1;
    }
}
console.log(matrix_empty); //here give me wrong result not -1 in whole position

matrix_test = getRandomMatrix(matrix_empty);

function getRandomMatrix(matrix) {
    matrix[0][1] = 39;
    matrix[1][1] = 9;
    matrix[2][2] = 9;
    return matrix;
}

Question:

Why console log give me wrong result? They give me:

matrix[0][1] =39;
matrix[1][1] = 9;
matrix[2][2] = 9;

but I expect -1 in whole matrix!

What should i do, that this give me -1 in the whole matrix in console.log (set in this position)

I tested this in Firefox and Chrome.

Answer 1

Chrome doesn't keep a copy of the object like it was when you used console.log, it uses references and evaluates the object when you inspect it. If you want to see the object like it is when you console.log it you should JSON.stringify() it some thing like: console.log(JSON.stringify(matrix_empty)) BTW, just so you know matrix_empty points to the same object as matrix_test so if you change matrix_test you change matrix_empty. If you want 2 different objects i suggest something like: var matrix = $.extend(true,[],matrix_empty); That way you will have 2 different arrays.

Answer 2

Some browsers (Chrome, notably) have an asynchronous implementation of console.log() . Your code modifies the "matrix_empty" array in the "getRandomMatrix()" function. When you pass an array to a function in JavaScript, you pass a reference to the array, not a copy.

What's happening, therefore, is that the console.log() call is showing the result of that function call, even though your code calls console.log() before making it. ( edit — I do see the behavior in Firefox too.)

Answer 3

The short answer is it does display -1 in all the positions, but then immediately the value is changed as you fire the getRandomMatrix function. As all objects are pass by reference and not pass by value the array is changed but without you being able to see the original value.

If you check out the fiddle I made to display this change, you can see this happening.

var cols = 9;
var rows = 9;
var matrix_empty = [];

function getRandomMatrix(matrix) {
    matrix[0][1] = 39;
    matrix[1][1] = 9;
    matrix[2][2] = 9;
    return matrix;
}

for (var x = 0; x < cols; x++) {
    matrix_empty[x] = [];
    for (var y = 0; y < rows; y++) {
        matrix_empty[x][y] = -1;
    }
}
console.clear(); // Just to empty the console so we don't confuse the results. 
console.log(matrix_empty); //here give me wrong result not -1 in whole position

setTimeout(function() { 
    matrix_test = getRandomMatrix(matrix_empty);
    console.log(matrix_empty);
}, 10000);

To begin with the delay is set to 10 sec so you have time to open up the array in the debugger and verify that the values indeed all are -1.

However, if you wait for the setTimeOut function to fire after 10 seconds (or make the timeout much shorter), without opening the array up you then after the second array has been logged to the console, now you can open both arrays up and verify that yes they have both been changed. Another way to look at an introduction to pass by reference vs pass by value.

http://jsfiddle.net/vDgJ3/