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.

possible duplicate of [Why does javascript object show different values in console in Chrome, Firefox, Safari?](http://stackoverflow.com/questions/8249136/why-does-javascript-object-show-different-values-in-console-in-chrome-firefox) — Joeytje50, Jan 25 '14 at 14:50

score 2 · Answer 1 · answered Jan 25 '14 at 15:18

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.

Pointy · Answer 2 · 2014-01-25T14:35:49.740

0

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.)

edited Jan 25 '14 at 14:35

answered Jan 25 '14 at 14:28

Pointy

405,095
59
585
614

Firefox, Chrome and Opera (all latest on x64 Linux) do this – Deryck Jan 25 '14 at 14:39
@Deryck yes, I imagine; I recently uninstalled Firebug but I recall that it seemed to behave a little better. – Pointy Jan 25 '14 at 14:40
It gave me the same wrong result in Firefox too. I use ubuntu 12.10 i686 i686 i686 GNU/Linux 3.5.0-45-generic #68-Ubuntu – user3235224 Jan 25 '14 at 14:41
@user3235224 yes, I tried it in Firefox too. The result isn't really *wrong*; it's showing you the value of the array *after* the call to "getRandomMatrix" instead of before that. If you comment out that function call, you'll see that the array is correctly initialized. – Pointy Jan 25 '14 at 14:42
Yey I know that I comment this line matrix_test = getRandomMatrix(matrix_empty); the result will be ok. But what should I do whithout comment this line. – user3235224 Jan 25 '14 at 14:48
@user3235224 well unfortunately that's just how `console.log()` works. I find it very frustrating too, sometimes. – Pointy Jan 25 '14 at 14:49

score 0 · Answer 3 · answered Jan 25 '14 at 16:41

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/

javascript console.log give wrong result in variable

Question:

3 Answers3

Linked