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

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.