Question

A very simple code to illustrate the difference.

var x = [0, 3, 1, 2];
console.debug('debug', x);
console.log('log', x);
// above display the same result
x.splice(1, 2);
// below display kind of a different result
console.debug('debug', x);
console.log('log', x);

alt text http://sixbytesunder.com/stuff/firebug_console.png

The javascript value is exactly the same but console.log() displays it a bit differently than before applying splice() method. Because of this I lost quite a few hours as I thought splice is acting funny making my array multidimensional or something.

I just want to know why does this work like that. Does anyone know? 🙂

Answer 1

If you look at the documentation, it says:

The console knows four different types
of messages, which are described below
[…]

See also the Console API for more
information about the different
commands.

A look on that page shows at console.log:

If objects are logged, they will be
written not as static text, but as
interactive hyperlinks that can be
clicked to inspect the object in
Firebug’s HTML, CSS, Script, or DOM
tabs.

So, I think that before the splice, the array is internally still an Array (I know, it is a kind of object), but after the operation, you get a general object, at least internally. I know this is a weak explanation, but Firebug has more strange behaviour in the console.

BTW, the ECMAScript specification says nothing useful, but we can read in the section about Array.prototype.splice (§ 15.4.4.12):

The splice function is intentionally
generic; it does not require that its
this value be an Array object.
Therefore it can be transferred to
other kinds of objects for use as a
method. Whether the splice function
can be applied successfully to a host
object is implementation-dependent.