How can jquery object use index to access DOM like array?

Question

I knew that jQuery function $("selector") returns an object.

var divTest = $(".test"); // returns object
Array.isArray(divTest); // false
typeof divTest; // "object"

Using this object wrapped by the jQuery function, we can use the API of jQuery.

The point that I cannot understand is how we can access native DOM element(s) using an index in jQuery objects like we do in arrays.

<div class="test first"></div>
<div class="test second"></div>
<div class="test third"></div>
//...
var divTest = $(".test");
console.log(divTest[0]); // <div class="test first"></div>
console.log(divTest[1]); // <div class="test second"></div>
console.log(divTest[2]); // <div class="test third"></div>

I opened the uncompressed jQuery source file. I think this question is related with the following method.

The method jQuery.fn.init returns jQuery.makeArray(selector, this). makeArray is extended from jQuery.

Can someone give comments to help me understand this issue?

• zer00ne: Issue? That's standard behavior of any jQuery object and other array-like objects. While both true arrays and array-like objects (pseudo-array?) have an index and length that's where the similarities end. The fact that jQuery has methods like makeArray() is evidence that the common jQuery Object isn't an array (otherwise why would makeArray() exist in the first place)
• Angel Politis: Check out my answer for a thorough explanation @YounghunJung.

Answer 1

There is no issue. The object $(".test") returns is array-like (behaves like an array), so you can access the elements it contains the same way as you would if you were using the native function document.querySelectorAll(".test").

There is nothing special to it. What jQuery does is use native functions to get the elements and then inject each one to its array-like object. Check out the example below to see how a simple jQuery-like function can be made.

Example:

/* ----- JavaScript ----- */
function $ (selector) {
 /* Check whether the context is a $ instance. */
 if (this instanceof $) {
 /* Get the elements matching the given selector. */
 var elements = document.querySelectorAll(selector);
 /* Set the length property of the object. */
 this.length = 0;
 /* Iterate over every element gotten. */
 for (var i = 0, l = elements.length; i< l; i++) {
 /* Inject each element in the object. */
 this[i] = elements[i];
 /* Increment the length. */
 this.length++;
 }
 /* Cache the selector as a public property of the object. */
 this.selector = selector;
 }
 else return new $(selector);
}
/* --- Use --- */
var elements = $(".test");
console.log(typeof elements);
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

<!----- HTML ----->
<div id = "e1" class = "test"></div>
<div id = "e2" class = "test"></div>
<div id = "e3" class = "test"></div>

---

Notes:

1. Trying to learn JavaScript by reading the jQuery source code is a bad idea.
2. In order for an object to be array-like, it must have:
   • numeric properties (indices),
   • a numeric length property and
   • a splice method (optional, to be logged as an array in the console).

• mdatsev: Is it possible to make any object array-like?
• Angel Politis: Yes. In order for an object to be array-like, it must have numeric properties and a length. In order to be logged as an array in the console as well, it must also have a splice method @mdatsev.
• Younghun Jung: Thanks. Actually I do not learn JS by reading the jQuery.. The point is that I haven't understood Array-like object. Thanks for your reply!!
• Angel Politis: You're welcome @YounghunJung. I'm glad I could help. I hope it's clear to you what an array-like object is now :)