Why is it possible to query jQuery('div') like an array?

Question

I got another question regarding jQuery's architecture. $('div') constructs a new jQuery object:

$('div') instanceof jQuery; // true

I'd like to know why it is possible to query it like an array, allthough it isn't an array?

$('div')[0]; // returns the first div in the document as a DOM node.
$.isArray($('div')); // false

I just love this syntax, it looks so clean! I also noticed this returns the DOM nodes as an array:

console.log($('div'));

Can somebody explain me how to implement this behaviour to my own objects?

---

My own approach was to make an array with some methods like this:

var a = ['a', 'b', 'c'];
a.method = function(){ return 'test'; };
a; // ['a', 'b', 'c']
a[0]; // 'a'
a.method(); // 'test'

However this doesn't seem to be the way jQuery does it as this is actually an array:

$.isArray(a); // true

I'd like to know how jQuery does this to learn and to see if it's a better solution than mine.

Answer 1

A jQuery object is what we call a Array-like object. That means, it indeed is a "true" object (infact, all "arrays" are objects in ECMAscript), but it owns certain properties which make it look like a "true" array. Those properties are

• it as a .length property
• it owns the .splice() method

those two facts are enough that most js engines consoles will interpretate that object as array.

Example:

var myObject = { },
    push = Array.prototype.push;

myObject.aNiceFunction = function() {
    console.log(this);
};

push.call( myObject, document.getElementById('foo') );
push.call( myObject, document.getElementById('bar') );

myObject.splice = Array.prototype.splice;

If we now log our object

console.log( myObject );

we get the typical jQuery'ish result

[div#foo, div#bar]

See that in action

but we are still able to call our method .aNiceFunction() on that object. By pushing new elements with the Array.prototype.push() method onto our object, ECMAscript will automatically index those elements for us. That was short description what happens under the jQuery hood.

One more word about "Arrays" in ECMAscript. There are no real arrays in this language (if we forget about typed arrays for a second). There is only Object. If we have an object that inherits from Array.prototype we would almost call it an array. Everything we would have left to do is, set the .length property to 0.

Answer 2

jQuery objects are array-like objects.

An array-like object is an ordinary object that has the same properties that an array does.
An array like object has a length property set to a positive integer, and properties named 0, 1, ... length − 1 containing the array objects.