Javascript Array logging confusion

Question

I have noticed something that I cannot understand at all. I am doing something really simple in JavaScript:

var a = [1,2,3];

console.log(a.push(4));
console.log(a);
console.log(a.push(5));

I would expect the console to log: 4, [1,2,3,4], and 5 as described here for example. The catch is that the actual console output looks like: 4, [1,2,3,4,5], and 5

See: http://jsfiddle.net/HknMF/

What on earth makes the 5 appear in the second log output?

EDIT: fwiw here's a screenshot of Firebug showing both behaviors: https://i.sstatic.net/x2XH8.png

are you sure? I tried running your code in jsfiddle and the console output is as expected... I am on Firefox 10.0.2. What browser are you using? — Hery
– Hery, Commented Mar 16, 2012 at 9:14
@Hery yes I am sure, I tried it in Chrome & Firefox (with Firebug). What kind of console are you using? Firebug too? — m90
– m90, Commented Mar 16, 2012 at 9:18
@Hery strangely enough I can get Firebug to show both behaviors. The "odd" one will display a HknMF/show as source, the other one states _display — m90
– m90, Commented Mar 16, 2012 at 9:22
Very weird indeed. For me, both HknMF/show and _display show the same output. I tried running the jsfiddle code in chromium though, and I finally get to see your output... — Hery
– Hery, Commented Mar 16, 2012 at 9:25

ThiefMaster · Accepted Answer · 2012-03-16 09:33:24Z

4

The console in some browsers uses a reference to the array/object, so when you inspect it and the object changed after the console.log() call you'll see the changed object.

In Firefox this also happens for objects, but not for arrays which are displayed inline anyway:

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

Especially for objects that do not contain functions a quick workaround is either cloning them (log $.extend({}, yourObject) if you have jQuery) or logging their JSON string version (then you lose the nice object view and just get a plain string though). An array can easily cloned (shallow copy!) using a.slice(0)

edited Mar 16, 2012 at 9:33

answered Mar 16, 2012 at 9:14

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

3 Comments

m90 Over a year ago

Ok that explains a lot, is there a way to log the current state of an Array?

ThiefMaster Over a year ago

JSON.stringify() or clone it (a.slice(0))

user123444555621 Over a year ago

...or console.log(a + ''); console.log(a.join(','));

Christoph · Accepted Answer · 2012-03-16 09:26:36Z

1

Dependent of the Browser either your live array gets logged (Chrome) or A string representation (Firefox).

A shallow copy is sufficient to prevent that. Use:

console.log( a.slice(0) );

for that.

answered Mar 16, 2012 at 9:26

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Collectives™ on Stack Overflow

Javascript Array logging confusion

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related