Question

I’m wondering how it’s possible that jQuery objects show up as an array in the console log of Developer Tools in Chrome.

E.g. if I execute $('<a>'), what I see in the console log is:

[<a>​</a>​]

But the following statements are false:

var a = $("<a>");

Array.isArray(a);   // false
a instanceof Array; // false

I tried to modify jQuery and see what happens, and one thing that was surprising is that removing length from the jQuery function removes the array notation:

length: 0, // commenting this line removes array notation

Instead, it then shows up as (arrow is that solid one to expand):

> jQuery.jQuery.fn.jQuery.init

But, if I try to make my own constructor which is supposed to be displayed in array notation, it does not work:

var test = function() { this.length = 0 };

new test();

// Logged (arrow is same one as before):
// > test

So I’m wondering what in the jQuery code makes Developer Tools show instances as an array. What property/function/thing is added to jQuery that makes Developer Tools handle it as an array when displaying an instance?

Answer 1

From http://api.jquery.com/jQuery.makeArray/:

Many methods, both in jQuery and in JavaScript in general, return objects that are array-like. For example, the jQuery factory function $() returns a jQuery object that has many of the properties of an array (a length, the [] array access operator, etc.), but is not exactly the same as an array and lacks some of an array’s built-in methods (such as .pop() and .reverse()).

Basically, The object has to have length and splice properties to be array-like. Here is a relevant SO question: Array Like Objects in Javascript