0

I have an array within a JavaScript object that is behaving in a manner I cannot explain.

The code is:

var board = {
    val: [false],
    init: function() {

        console.log(board);      // when expanded, console says board.val[0] = true
        console.log(board.val);  // console says board.val[0] = false

        board.val[0] = true;
    },
};

board.init();

The method outputs the object in the console, THEN modifies the value in the array. But the output of the object before the value has been changed indicates the value has already been changed.

I am looking for an explanation of why this is happening, or a link to an explanation. Please ask for clarification in the comments if any is needed. I will be happy to give any details I've neglected.

The array in the project I am working on is a large, multi-dimensional array, and this behavior is causing unexpected results. I'm sorry I haven't got any ideas or research to share. I don't know what to search for that doesn't give me the basics of JavaScript arrays. I thought I knew how JavaScript arrays and objects work, but this is stumping me.

jay
  • 177
  • 1
  • 12
  • 1
    Just tested your code, and it (properly) output 'false'. Are you testing in a specific browser or in NodeJS? – Martin Dec 19 '15 at 19:43
  • An array itself cannot be true or false. Your example makes no sense. – Karoly Horvath Dec 19 '15 at 19:44
  • 1
    board.val is an array. You should test board.val[0]. Why aren't you simply assigning board.val = false instead of board.val = [false] ? – Ludovic C Dec 19 '15 at 19:45
  • 1
    Suggest changing the line to : "console.log( board.va[0]);" which will instead give you the value of the first element of the array. – Yogi Dec 19 '15 at 20:00
  • @Martin, I am testing in Chrome. Just to be clear, for you, `console.log(board);` show that board.val[0] = false – jay Dec 19 '15 at 20:04
  • It has to do with console.log, not arrays. See this http://stackoverflow.com/questions/16484838/console-logarray-shows-different-array-contents-than-iterating-the-array-and-d – mgiesa Dec 19 '15 at 20:06
  • @Ludo, I am interested in the value of the element in the array; that's why I didn't assign `val: false`. Thanks for your comment. I wasn't clear on what I was meaning. It should be reflected in the edit now. – jay Dec 19 '15 at 20:06

1 Answers1

3

It's how the console works - when you log a full (unexpanded) object, you see the values of its properties at the time you expand it, not at the time the object was logged. So, in your case, you're getting var true because it became true in the meanwhile.

There's no "fix" for this, except perhaps stringifying the object when logging it, but whenever you need an accurate representation of a variable, make sure you log the variable itself, and not its parent object.

It behaves the same way with arrays and objects, as soon as your array/object is nested deep enough in order for the console to collapse it, watch: 

var arr = [[false]];
var obj = {sub: {subsub: false}};
console.log(arr, obj, JSON.stringify(arr), JSON.stringify(obj));

arr[0][0] = true;
obj.sub.subsub = true;

Open the console, expand them both, and you'll see contradictions (false/true) in the same console line.

Shomz
  • 37,421
  • 4
  • 57
  • 85