Strange console.log () behavior in Firefox 37

Question

A few minutes ago, while playing with javascript, I noticed the strange behavior of console.log() . Actually, it looks like log-distorted variables. Take a look at the following:

 var res = document.getElementById("res"); var arr = ["1", "2", "3"]; arr.push("4"); res.innerHTML = JSON.stringify(arr)+'<br>'; console.log(arr); arr.push("5"); res.innerHTML += JSON.stringify(arr); console.log(arr); 

 <div id="res"></div> 

It prints the correct variables in #res , but not in the browser console (Firefox 37)

Can someone explain to me why this is happening?

Answer 1

So, if you change your log to take a copy of the array:

 var arr = ["1", "2", "3"]; arr.push("4"); console.log(arr.slice()); arr.push("5"); console.log(arr.slice()); 

Everything works as expected.

I track live tracking as an opportunity because the following example does not display any real tracking data:

 var arr = ["1", "2", "3"]; console.log(arr); var i; i = setInterval(function(){ arr.push(1); console.log(arr); if(arr.length>10)clearInterval(i) },1000); 

This means that logging is queued and the queue does not start until the last click on the array (probably until your javascript finishes executing).

Nice to find ... definitely something that can catch the developers.