Javascript internally changing array values, any fix?

Question

I'm making a chess game. And I'm storing some tiles of the chessboard for some usage in my program in an array. The problem is, when I update the values in the array, and log them onto the console, I can see the values of the array, which are correct. But, upon clicking and checking the actual values in the console, the array shows different values.

I'm using google chrome's console.

I've already seen another stack overflow saying that this is a known "bug", but the developers won't fix it because it's not actually a bug.

Here's what I see in the console:

 (2) ["a6", "a5"]
0: "`6"
1: "b6"
length: 2
__proto__: Array(0)

As you see, the values in the array I see are different than the values that are stored in the array. And this causes many other problems in my program which rely on the contents of this array.

What I want to know is if this is common, and also if there is any fix. Or maybe some scenarios where cases like this occur.

Also, I'm still unsure, for the array shown above ^, are the actual values of the array the values I see ("a6" and "a5"), or the wrong values shown internally ("`6" and "b6").

Please help, if this doesn't work, it will be extremely difficult to finish the project I'm working on.

Here is the code I use to update the array:

let moves = [];
 if (tile.slice(1, 2) == 7 && b1.board[dd].piece == null && b1.board[d].piece == null) {
            moves.push(d);
            moves.push(dd);
        }
        if (tile.slice(1, 2) == 7 && b1.board[d].piece == null && b1.board[dd].piece != null) {
            moves.push(d);
        }
        if (parseInt(tile.slice(1, 2)) > 1 && tile.slice(1, 2) != 7 && b1.board[d].piece == null) {
            moves.push(d);
        }
        if (tile.charCodeAt(0) > 97 && parseInt(tile.slice(1, 2)) > 1 && b1.board[ld].piece != null && b1.board[ld].piece.slice(0, 1) == "w") {
            moves.push(ld);
        }
        if (tile.charCodeAt(0) < 104 && parseInt(tile.slice(1, 2)) > 1 && b1.board[rd].piece != null && b1.board[rd].piece.slice(0, 1) == "w") {
            moves.push(rd);
        }
        console.log(moves);

just to provide some context, I make an array called moves. I push values into the array based on some conditions. Then I log the array onto the console, which is what I showed above.

The if statements are working because the values I see in the array are correct. But as you know, upon clicking and checking the internal values in the console, they are wrong.

The result I am expecting from the console is:

 (2) ["a6", "a5"]
0: "a6"
1: "a5"
length: 2
__proto__: Array(0)

How do I fix this problem?

i mean to use something like `['a', 5]` or an object, instead of `'a5'`, which requires slicing for getting the values. — Nina Scholz, Mar 28 '19 at 08:38
Not a bad idea, But I have to revise all my code, which would be a pain. — Plzhelp, Mar 28 '19 at 10:15

score 0 · Accepted Answer · answered Mar 28 '19 at 08:39

0

Not sure this is the cause, but when console.log, Chrome and other browser don't output the serialized values of the arrays/objects but just stores the reference on them. Later when you inspect these arrays/objects Chrome will show the current values in those arrays, not the values that were present at the time of logging.

Try logging with console.log(JSON.stringify(thingToLog)). Or even better with console.log(JSON.stringify(thingToLog, undefined, ' ')).

answered Mar 28 '19 at 08:39

croraf

4,332
2
31
50

What does console.log(JSON.stringify(thingToLog)) actually do? Also, I never change the values in those arrays, so I should be getting the most current values. – Plzhelp Mar 28 '19 at 11:50
Actually wait never mind, I do change the values, let me fix it and I'll get back to you – Plzhelp Mar 28 '19 at 11:54
Yup, you were right, it logs the most recent values of the array, but that's so weird, shouldn't they fix that? Thanks anyway! This is the correct answer – Plzhelp Mar 28 '19 at 12:00
Check the discussion here: https://stackoverflow.com/questions/24175017/google-chrome-console-log-inconsistency-with-objects-and-arrays. It is a relatively known think, and I think it is considered to be working as expected, because of saving storage I think. – croraf Mar 28 '19 at 13:46
JSON.stringify converts the object/array into string which is immutable and logged by value, not just as a reference which can be modified later. – croraf Mar 28 '19 at 13:48
Actually, I'm not sure the link to other question on SO has correct answers. I think it is a feature in Chrome, not a bug. – croraf Mar 28 '19 at 13:53

Javascript internally changing array values, any fix?

1 Answers1