Question

This returns a jQuery object. what is a jQuery object. Is it an object, an array, or some combination of both?

$("#id")

I’m looking in the source here, but can not find it.

Answer 1

First, what it’s not.

A jQuery object is not an Array.

In JavaScript, there are built-in native constructor functions. One of these is Array. But ultimately the Array constructor creates Objects. jQuery objects are not built from the Array constructor.

---

So how is an Object different from an Array?

Since Object and Array are built-in native constructors, the objects created from the constructors have an internal [[Class]] property. You can see its value like this.

Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call([]); // [object Array]

So you can see that these objects have that as a difference.

---

What other differences are there?

The prototype chain of the two objects are different. For a plain object, it could be visualized like this.

{} ---> Object.prototype ---> null

While for an Array, like this.

[] ---> Array.prototype ---> Object.prototype ---> null

So you can see that their inheritance distinguishes them as well.

---

So what about a jQuery object?

A jQuery object is more like a plain Object than an Array. But JavaScript lets you define custom (not built-in) constructors.

The toString value will be the same as an Object [object Object], but the prototype chain will be different.

function Foo() {

}

new Foo() ---> Foo.prototype ---> Object.prototype ---> null

So jQuery’s prototype chain would be similar to this, but with the jQuery constructor instead of Foo.

---

So what does all this mean?

All objects in JavaScript are similar in that they inherit from Object.prototype *, but you can have different objects that have an extended prototype chain, and you can also have native objects that have an internal [[Class]] property that gives them distinction.

So to answer the question of “what type of object is a jQuery object”, the answer is that it is an Object that inherits from Object.prototype like every object, but also inherits from the prototype of its custom constructor.

_{* Note that in ES5, you can also have an object that has no prototype chain. Its chain is terminated immediately with null.}

---

But a jQuery object stores DOM elements at numeric indices, and has a .length property. Doesn’t that make it an Array?

No, that just makes it an object with properties that are numbers, and a property named length.

var myObj = {};
myObj[0] = "foo";
myObj[1] = "bar";

An Array’s properties are not special. They are identical to an Object’s properties.

var myArr = [];
myArr[0] = "foo";
myArr[1] = "bar";

These two code examples are doing the exact same thing.

---

They’re doing exactly the same thing? Really?

Well almost. The properties themselves are no different between Array objects and Object objects, but Arrays have some special behaviors.

For example, if I add a property at a higher index than the current .length accounts for, the .length will be automatically adjusted.

myArr.length; // 2
myArr[9] = "baz";
myArr.length; // 10

On an Array, .length itself has some “magic” abilities, like being able to truncate the Array by setting .length to a lower value.

myArr.length = 1;
myArr[1]; // undefined

So while a jQuery object has numeric properties and a .length property, it doesn’t behave as a native Array would behave.