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; /         


        

Answer 1

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.

Answer 2

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 3

Treating a jQuery object like an array is an application of duck typing. From Wikipedia:

In computer programming with object-oriented programming languages, duck typing is a style of dynamic typing in which an object's current set of methods and properties determines the valid semantics, rather than its inheritance from a particular class or implementation of a specific interface.

In other words, it's not important that the jQuery function actually return an array instance, as long as it provides the necessary properties (e.g. length, numeric indices) and methods to act like an array.

JavaScript has other array-like objects. For example, the arguments object isn't an array, either, but it has properties (like length) that allow you to pretend it is.

Answer 4

I am not sure what this "array-like" craziness is from the other answers. There is no standard terminology for "array-like".

The actual difference here is the difference between an actual array, which is a collection of elements versus a linked list which is a collection of references. In reference to the DOM a linked list is properly referred to as a node list. These articlea have more information:

http://www.mindcracker.com/Story/1016/interview-question-difference-between-linked-list-and-array.aspx

http://www.sitepoint.com/a-collection-is-not-an-array/

http://blog.duruk.net/2011/06/19/nodelists-and-arrays-in-javascript/

Answer 5

jQuery objects are "array-like" objects. Consider the code below:

document.forms.length; // returns 1;
document.forms[0]; // returns a form element.
document.forms.join(", "); // throws a type error. this is not an array.
typeof document.forms; // returns "object"

Modifying your code, you could achieve this same affect:

var a = 
{
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3,
    method: function() {
        return "test";
    }
};