Javascript unexpected console output with array assignment;

Question

I am getting unexpected console output after array assignment in webkit browsers (Chrome 16.0.912.77 and Safari 5.1.2 - 7534.52.7).

Here is my function that demonstrates the error:

function test() {
    var myArray = [];
    console.log(myArray); // Should be [], but is [0]
    myArray.push(0);
}

I receive the expected output of [] in Firefox 7.0.1.

[EDIT]

When I insert a long synchronous sleep, the problem doesn't go away. This makes me think that (1) even though the console.log statement is asynchronous, it is running in the same thread and (2) it is waiting until the event queue is empty before it runs and (3) the reference passed to console.log is being turned into a string when console.log is finally executed - not when it is called.

function sleep(millis){
  var date = new Date();
  var curDate = null;
  do { curDate = new Date(); }
  while(curDate-date < millis);
}

function test() {
    var myArray = [];
    console.log(myArray); // Should be [], but is [0]
    sleep(2000);    
    myArray.push(0);
}

This doesn't seem like desired behavior.

Are you sure it's not just a naming thing, the fact that it's an array of size 0? Have you tried accessing myArray[0] in webkit browsers? — dougajmcdonald
– dougajmcdonald, Commented Jan 25, 2012 at 15:14
In regards to your edit, see the possible duplicate question. The results are evaluated on completion of the code. So no synchronous waiting. Use .concat() or .join() instead. — Ry-
– Ry- ♦, Commented Jan 25, 2012 at 15:45

Ry- · Accepted Answer · 2014-02-23 18:16:52Z

6

This is because console.log is by reference and asynchronous, and your push() ends up executing before the result is displayed.

You could do a quick:

console.log(myArray.slice());

Instead, for debugging purposes.

To test this more obviously:

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

will give [1, 2, 3, 4, 5].

var a = []; console.log(a); setTimeout(function() {a.push(1, 2, 3, 4, 5);}, t);

gives the wrong result for me with t = 5 and the right result for t = 100.

edited Feb 23, 2014 at 18:16

answered Jan 25, 2012 at 15:13

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bbrame Over a year ago

Your explanation makes sense, but it doesn't seem like useful behavior. What use is console.log if you can't trust it's output (or must trust it very carefully)? Also, I get the same behavior when I insert a delay between the log statement and the push.

Ry- Over a year ago

@bbrame: It's not really intended to be used like that, I suppose; and as for the reason it's asynchronous, that's for performance. When you console.log an HTML element, it renders it as a tree. Log jQuery('*') and it would hang your JavaScript.

Guffa Over a year ago

@bbrame: No, it's not useful, and listed as bugs for the browsers that do this. Some browsers behave differently.

outis Over a year ago

@bbrame: console.log is so code can inconspicuously alert developers that there's an issue. It's no replacement for an interactive debugger when it comes time to fix the issue.

Collectives™ on Stack Overflow

Javascript unexpected console output with array assignment;

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related