JavaScript recursion and closure?

Question

I have this function (sample here: http://jsbin.com/emabe4/ )

var a=[];
var log = document.getElementById('log');

function loop(x){

  x++;
  a.push(x);

  if (x < 10){
    log.innerHTML = log.innerHTML + "<br/>" + a;
    console.log(a);
    loop(x)
  }

}

As the loop calls itself recursively, the array gets longer and is written out with the inner HTML as such:

[1]
[1,2]
...
[1,2,3,4,5,6,7,8,9]

Which is how I'd like it to work.

But if you look at the console log, this is what you see:

[1,2,3,4,5,6,7,8,9]
[1,2,3,4,5,6,7,8,9]
...
[1,2,3,4,5,6,7,8,9]

The questions:

1) Why the discrepancy between innerHTML and console.log?

2) the console log appears to be what is actually being created and I think that's due to a closure problem, correct? If so, what's the workaround for this to do what I want it to do (the former, where I can interact with the array step-by-step as it grows each time)? I've solved this before in while loops, but not sure how to handle it here.

It appears to not work correctly in Chrome. Maybe Chrome defers the calls to console.log until after the recursion? Firefox 3.6.3 appears to work correctly. — Zack The Human
– Zack The Human, Commented Mar 25, 2011 at 1:52
hmm...you are right! so...why the difference when sending 'a' to log vs '"" + a' to log? — DA.
– DA., Commented Mar 25, 2011 at 1:54
interesting...if I merely put an alert(''); in there, that's enough to get the console to log the output properly. Seems to be a timing issue between the script and the console. — DA.
– DA., Commented Mar 25, 2011 at 1:57
regarding "" + a it force the generation of a temporary string and it's this string that is displayed by the log, not the array. — Julien Roncaglia
– Julien Roncaglia, Commented Mar 25, 2011 at 2:01
Interestingly, it works as expected when you remove the log.innerHTML line. And it doesn't work right when you put log.innerHTML = 'x'. So it seems like it has something to do with innerHTML? — htanata
– htanata, Commented Mar 25, 2011 at 2:56

score 4 · Accepted Answer · 2011-03-25 02:12:02Z

4

console.log(a) is should be strictly evaluated and will have the same results as the innerHTML. This can be verified (or disproved) with console.log("" + a). As the post and comments indicate, this differs by browser (Chrome is lazy here, Firefox is strict).

In the case of console.log("" + a) it forces the evaluation of the object in a to the string representation.

There is only one a in all cases (and more-so, there is only one array passed to console.log). That is, it's not a closure problem with the code, but rather a problem with console.log deferring conversion of the object to a string representation (in Chrome). If it defers conversion until after the loop completes then the behavior would be as described as it will print out the same object n (10) times in a row.

Happy coding.

edited Mar 25, 2011 at 2:12

answered Mar 25, 2011 at 1:53

user166390

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

Comments

Julien Roncaglia · Accepted Answer · 2011-03-25 01:57:35Z

Chrome console is keeping your array around and by the time it could display it, it already changed.

I guess that it might be filled as a chrome bug, that console.log should clone it's input or convert it to string but not defer evaluation of it's arguments.

By forcing a string conversion you could even get things like that :

a=1
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4,5
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4,5,6
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4,5,6,7
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4,5,6,7,8
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a=1,2,3,4,5,6,7,8,9
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Zack The Human · Accepted Answer · 2011-03-25 05:42:14Z

1

The OP doesn't mention which browser this happening in, but this behavior has been reported in the Chromium project. See Issue 50316. A project member reports the following:

we evaluate array content asynchronously when it has its latest value

For other browsers this doesn't seem to be an issue.

answered Mar 25, 2011 at 5:42

Zack The Human

8,5118 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

JavaScript recursion and closure?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest