Why does assigning a value to an array in a for loop result in the array having the same value for each iteration when passed to console.log()?

Question

Given the following code:

var tmp = [0];
for(var i=0;i<100;i++) {
  tmp[0] = i;
  console.log(tmp);
}

I'd expect output of [0], [1], [2], [3], etc

But I instead get [99], [99], [99], [99], etc

Stepping through the code in a debugger (firebug) however nets me the correct result of [0], [1], [2].

Changing console.log to alert works... hmmm (didn't try console.log cause I don't want to enable Firebug.) — Thomas Eding
– Thomas Eding, Commented Aug 9, 2010 at 5:19

Joshua · Accepted Answer · 2010-08-09 05:23:58Z

7

console.log(tmp[0])

When you put console.log(tmp) you are logging the entire array object. Firebug only creates a link to the object and then when you "look" at the object in firebug you are looking at its current state (after the for loop has completed).

edited Aug 9, 2010 at 5:23

answered Aug 9, 2010 at 5:15

Joshua

3,5253 gold badges30 silver badges19 bronze badges

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

5 Comments

shasderias Over a year ago

That seems awfully misleading (the way the console.log works). When I step through the code, why does it behave differently?

Shog9 Over a year ago

@user414722: because when you step through, the evaluation is done each time a "step" completes. As for misleading... It's a feature: you're not logging text, you're logging an object reference, and they're all references to the same object. If you want a quick snapshot of the array, pass tmp.slice() to .log(); if you want a textual snapshot, just pass tmp.toString() to .log()

shasderias Over a year ago

So say console.log actually did some work, the correct way of writing the for loop would be to tmp.slice(); to pass in the "snapshot" of the array?

Shog9 Over a year ago

@shasderias: what's "correct" depends entirely on what you want to happen. console.log() stores the reference for later use; if you want different references, you have to create them. If you're calling a routine that processes its inputs immediately rather than storing them, then you can get away with re-using the same object. I'm just explaining why the example you posted behaves the way it does... Since I don't know what you're actually trying to accomplish, I can't say how you should try to accomplish it.

shasderias Over a year ago

Got it, thank you very much. The actual problem is that I'm trying to pass the value to emit in a CouchDB map function, and truth to be told, I have no idea if it processes the input immediately. :P But given my problem, I'm guessing that it doesn't, and thus .slice() would be correct. Thank you very much!

cnanney · Accepted Answer · 2010-08-09 05:40:38Z

0

That is interesting. Even without a for loop:

var tmp = [], i = 0;
tmp[0] = i;
console.log(tmp);
i++;
tmp[0] = i;
console.log(tmp);

produces

[1]
[1]

...as well. I was not aware that console.log behaved that way. Thanks to @Joshua for a good explanation.

edited Aug 9, 2010 at 5:40

answered Aug 9, 2010 at 5:33

cnanney

2,1911 gold badge13 silver badges8 bronze badges

Collectives™ on Stack Overflow

Why does assigning a value to an array in a for loop result in the array having the same value for each iteration when passed to console.log()?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related