Google Chrome console.log out of sequence?

Question

Can someone explain the following two exits?

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 

Note that cat-53 is offset from the original PRIOR array to the output of console.log() , which must occur before the shift operation is performed. How is this possible? Or what am I missing?

EDIT: it is getting 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, the problem is with Google Chrome. 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"] 

Conclusion, as expected ...

Answer 1

console.log always a little "late" and you cannot count on it when it comes to objects. Only primitives (strings, etc.) will work directly. From the first in memory there is only one instance, so when the console retrieves data, it can already be changed.

Of course, it depends on which console you use, but I often experience this in Chrome.

Here is someone who tested this on Firebug.

Answer 2

Do I understand correctly that you are using Chrome? Firebug does not do this (I just checked - FF8.0, FB 1.8.4), but Chrome 16. does.

I think what happens in Chrome, console.log () is executed asynchronously so as not to interrupt your code or anything else; effectively, all console.log () happens right after the code that called them exits.

Edit: curses, ninja'd!

Answer 3

Unable to duplicate in FF 8.0 with

 x = [1,2,3,4,5]; console.log(x); y(); function y() { z = x.shift(); console.log(z); } 

Answer 4

console.log behavior

The console.log snapshot element in execute scope and print them to the console. Demo here:

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

obj not detected when calling console.log . But it prints to the console with the correct new_value property.

Problem with firefox

First, when using the function keyword to declare a function in firefox, the function name will not be assigned until the code is executed.

If you did not 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 specified in ECMA-262.

It is known that some commonly used ECMAScript implementations support the use of FunctionDeclaration as a Statement. However, there are significant and irreconcilable variations among implementations in semantics applied to such functions. Because of these irreconcilable differences, using FunctionDeclaration as a Statement results in code that is not reliably ported among implementations.

And firefox does not support this behavior.