Question

I’ve managed to do a fair bit with jquery with this small detail eluding me: how is it that I can apply a subscript operator to the result of a jquery call, which seems to return the dom element at that index? Javascript doesn’t support operator overloading, so I’m guessing it’s actually returning type ‘array’… yet you can also use the whole gamut of jquery methods on this array yet looking at the source code I only see ‘slice’ and ‘push’ added to Array.prototype…

I may have a few more questions within this topic area once I know the answer to this one…

Answer 1

You can access the properties of any JavaScript object using “array style” square bracket syntax:

var someObj = {
        someProp : "test"
    };

alert(someObj["someProp"]);   // alerts "test"

jQuery has simply made sure that the object returned from the $() function has properties that correspond to numeric indexes, and a length property that is one higher than the highest numeric index.

someObj[0] = "test";
someObj[1] = "whatever";
someObj.length = 2;

Simple (non-jQuery) demo: http://jsfiddle.net/nnnnnn/pguDH/

Note that in practice object property names are always strings. If you provide a number it is converted to a string. Even “real” array elements can be accessed with strings:

someArray["1"]
// give same results as
someArray[1]