Google Chrome console.log out of sequence? [duplicate]

Question

Can someone explain the following two outputs?

Code 1:

console.log(itemsAry);
//loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

Result:

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

(as expected).

Code 2:

console.log(itemsAry);
loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

Result:

["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

cat-53

Notice that cat-53 has been shifted from the original array PRIOR to the console.log() output that is supposed to be occurring BEFORE the shift operation ever takes place. How i this possible? Or what am I missing?

EDIT: it gets worse:

console.log(itemsAry);
loadNextItem(); loadNextItem(); loadNextItem(); loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
    console.log(itemsAry);
}

Result:

["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10

After testing in FireFox, it appears to be a Google Chrome issue specifically. FF output:

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

Output as expected...

Answer 1

Am I right in thinking you're using Chrome? Firebug doesn 't do this (I just checked - FF8.0, FB 1.8.4) but Chrome 16 does.

I think what's happening is that in Chrome, the console.log() is executed asynchronously, so as not to interrupt your code or something; effectively, all the console.log()s happen at once after the code that called them has finished running.

Edit: curses, ninja'd!

Answer 2

console.log is always a little "late" and you can't count on it when it comes to objects. Only primitives (strings etc.) will work directly. Of the former there is only one instance in memory, so when the console is fetching the data it may have changed already.

Of course, it depends on which console you're actually using, but I'm frequently experiencing this on Chrome.

Here is someone who experienced this on Firebug.

Answer 3

The behavior of console.log

The console.log snapshots element in the execute scope and print them in the console. An demonstration is here:

(function () {
  console.log(obj);
  var obj= {};
  obj.new_value = 'hello';
}())

obj is not defined when console.log is called. But it is printed into the console with the right property new_value.

The problem with firefox

First, when use function keyword to declare a function in firefox, the name of the function won't be assigned until execution of the code.

If you didn't define loadNextItem in your previous code, the following code will generate an error(ReferenceError: loadNextItem is not defined) in firefox.

loadNextItem();

function loadNextItem (){
    var item = itemsAry.shift();
    console.log(item);
}

This behavior is stated in ECMA-262

Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable differences, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations.

And firefox doesn't support this behavior.