Why does the JS console show an element as present in an array, if that element is absent at the time of the console log call?

Question

The following function proposed by "Doug Crockford: JavaScript: The Good Parts." works great.

var fibonacci = function () {
  var memo = [0, 1];
  var fib = function (c) {
    console.debug(memo, c, memo[c]);
    var result = memo[c];
    if (typeof result !== 'number'){
      result = fib(c - 1) + fib(c - 2);
      memo[c] = result;
    }
    return result;
  };
  return fib;
}();

console.log(fibonacci(3));

But let's see in detail what happens to the line 4

console.debug(memo, c, memo[c]);

It shows the following result which is opposite to what would be expected.

memo,        c, memo[c]
[0, 1, 1, 2] 3  undefined  //contradictory behavior because I expect to have memo = [0, 1]
[0, 1, 1, 2] 2  undefined  //contradictory behavior
[0, 1, 1, 2] 1  1
[0, 1, 1, 2] 0  0
[0, 1, 1, 2] 1  1
2

Some ideas?

Answer 1

It's a problem with Chrome's console output. Chrome seems to dynamically update the output to reflect the content of the array somehow. If you run it in Firebug, the output is:

[0, 1]    3 undefined
[0, 1]    2 undefined
[0, 1]    1 1
[0, 1]    0 0
[0, 1, 1] 1 1
2

Also it makes sense when you try to go through the code in your head: console.debug is the first statement in fib. The first time fib is called, memo is [0, 1] as there haven't been made any changes to the array. c is 3, so you get undefined. So in the first invocation, memo cannot be [0, 1, 1, 2] no matter what the console shows.

Some JavaScript consoles seem to show such a behaviour (in one way or an other), when you log references to arrays or objects. In these cases it is often better to set breakpoints and go through the code step by step.

Update: It seems Firebug fixed this issue (if it ever existed), but it still seems to exist in Firebug light.