Javascript Funky array mishap

Question

function a() {
 var b = ["b"];
 console.log(b);
 //console.log(b.slice());
 b = b.push("bb"); 
}
a();

In a "perfect" world you would think that the console.log would show ["b"], but wildly enough it shows ["b", "bb"] even though "bb" isn't pushed on until afterwards.

If you do console.log(b.slice()); Then you will get the desired result of ["b"]. Why is that? What's the reason behind this complication? I just want to understand this better so I can better avoid it from happening.

* Note I hit on this same point in a recent question of mine, but this is a much more concise example. @RightSaidFred has led me to this point and has been a huge help so far.

Edit

Runnable example on JSFiddle

• Thilo: What browser are you using? It probably helps to not log objects, but to stringify them first (rather than seeing that happen some time later).
• Jacksonkr: I'm on Chrome. Safari does the same thing, but this works fine in FF? Perhaps it's a webkit thing rather than just chrome?
• nnnnnn: Does this also happen with non-array objects?
• halfer: There was an answer merged into this, but we prefer answers to be added in the answer space proper, so I have removed it. I normally repost such removed answers as community wiki below, but in this case it seemed to duplicate an existing answer, so I thought there was no value in that. However, if you would like to post your own answer, please do (see the rev history).

Answer 1

This is a known problem with console.log.

Instead of turning the parameter into a string when you call the method, the parameter is stored and turned into a string when it's displayed in the UI. As nothing happens in the UI while the function is running, you will see the state of the object as it is when you exit the function.

Answer 2

I don't think this is a JavaScript wtf; I think it's a console.log wtf. Based on an answer I saw just yesterday, console.log is likely caching your object. If you replace console.log(b) with alert(b), you'll see b get displayed, as expected.

Unfortunately convincing console.log to behave in a predictable way is not something I have an answer for.

Answer 3

I'm assuming this has to do with the way that console.log() works although you're doing something a little funky when you say:

b = b.push("bb");

you should be able to just say

b.push("bb");

• Adam Rackis: replacing b = b.push("bb") with b.push("bb") producing the same bizarre output in console.log
• robdodson: I'm sure it does, I was just pointing out that you don't need to say b = b.push("bb"); At no point are you changing what the b variable points to so there's no need to reassign it. Just say b.push("bb")

Answer 4

Confirmation (if needed) of Guffa's answer :

function a() {
 var b = ["b"];
 console.log (b); 
 console.log (' ' + b); 
 console.log (b); 
 console.log (b.toString ()); 
 console.log (b);
 b = b.push("bb"); 
 console.log (b);
}
a();

Chrome outputs :

["b", "bb"]
 b
["b", "bb"]
b
["b", "bb"]
2

Note how every log referencing the object shows the "anomolous" result and each one which requires the evaluation of an expression does not. Note also the final log which shows that b is set to the value value 2, since the value returned by push is the new length of the array.

So, to avoid this issue ensure that each log parameter involves the evaluation of an expression.

Answer 5

I think it's a bug on the google chrome dev tools

• Kiss Koppány: ...and on firebug too :)