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.

You can access any property using [ ] notation. Not just indices. So just like $('div')[0], you can do $('div')['jquery'], which will give you the jQuery version number. — user1106925
– user1106925, Commented Jan 9, 2012 at 18:14
@amnotiam I know that. But when I print usual objects in the consoles they don't output an array. — js-coder
– js-coder, Commented Jan 9, 2012 at 18:14
Ah, if you're asking specifically about the console output, then it really is just the console making its best guess as to what you gave it. jAndy's answer shows what consoles typically do. — user1106925
– user1106925, Commented Jan 9, 2012 at 18:16
Example: console.log({"2":"foo",splice:function(){},length:2}); is clearly not an Array being logged, but shows up as [undefined, undefined, "foo"] — user1106925
– user1106925, Commented Jan 9, 2012 at 18:19

jAndy · Accepted Answer · 2012-01-09 18:28:48Z

10

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.

edited Jan 9, 2012 at 18:28

answered Jan 9, 2012 at 18:09

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SLaks Over a year ago

JS engines don't interpret anything as an array. JS users interpret things as arrays. :)

jAndy Over a year ago

@SLaks: touchè. What I was meaning there is, how for instance it is "logged out" by the console object.

SLaks Over a year ago

That's a function of the Firebug's / Chrome's pretty printer (which are JS users), not the JS engine.

SLaks · Accepted Answer · 2012-01-09 18:08:49Z

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.

answered Jan 9, 2012 at 18:08

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Wayne · Accepted Answer · 2012-01-09 18:13:53Z

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.

doogle · Accepted Answer · 2012-01-09 18:10:29Z

0

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";
    }
};

answered Jan 9, 2012 at 18:10

doogle

3,4161 gold badge21 silver badges23 bronze badges

1 Comment

js-coder Over a year ago

console.log(a) prints the object not the array. So this doesn't seem to be the way jQuery does it. And by the way I'm not a JavaScript beginner, I know how JavaScript objects work.

austincheney · Accepted Answer · 2012-01-09 18:23:15Z

0

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/

edited Jan 9, 2012 at 18:23

answered Jan 9, 2012 at 18:16

austincheney

1,1157 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related