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 thin

Answer 1

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 2

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 3

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 4

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

Answer 5

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");