Why can I query jQuery ('div') as an array?

Question

I have another question about jQuery architecture. $('div') creates a new jQuery object:

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

I would like to know why it is possible to request it as an array, although this is not an array?

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

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

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

Can someone explain to me how to implement this behavior for my own objects?

---

My own approach was to create an array with 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 does not look like jQuery does, as it is actually an array:

 $.isArray(a); // true 

I would like to know how jQuery does this to find out, and find out if this is a better solution than mine.

Answer 1

A jQuery object is what we call an Array-like object . This means that it is really a “true” object (infact, all “arrays” are objects in ECMAscript), but it has certain properties that make it look like a “true” array. These properties

• it's like a .length property
• he owns the .splice() method

these two facts are enough that most js engines consoles interpret this object as an array.

An 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 now register our object

 console.log( myObject ); 

we get a typical jQuery'ish result

 [div#foo, div#bar] 

See it in action

but we can still call our .aNiceFunction() method on this object. By Array.prototype.push() on new elements on our object using the Array.prototype.push() method, ECMAscript automatically indexes these elements for us. This was a brief description of what is happening under the hood of jQuery.

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. All we have to do is set the .length property to 0 .

Answer 2

JQuery objects are array type objects.

An array-like object is an ordinary object that has the same properties as an array.
An array-like object has the length property specified by a positive integer, and properties with the name 0 , 1 , ... length − 1 , containing the objects of the array.

Answer 3

Processing a jQuery object, such as an array, is a duck input application. From Wikipedia :

In computer programming with object-oriented programming languages, duck typing is a dynamic typing style in which the current object defines a variety of methods and properties of actual semantics, and how it inherits from a particular class or implements a specific interface.

In other words, it doesn’t matter that the jQuery function actually returns an instance of the array if it provides the necessary properties (such as length , numeric indices) and methods to work as an array.

JavaScript has other objects that look like an array. For example, the arguments object is also not an array, but has properties (such as length ) that let you pretend to be so.

Answer 4

JQuery objects are array objects. Consider the following code:

 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" 

By changing your code, you can achieve the same effect:

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

Answer 5

I'm not sure what “massive” insanity is from other answers. There is no standard terminology for an array.

The actual difference here is the difference between the actual array, which is a collection of items compared to the linked list, which is a collection of links. In relation to the DOM, a linked list is correctly called a node list. These articles have additional 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/