2

When entered into a JavaScript console, a jQuery object appears as an array. However, it's still an instance of the jQuery object.

var j = jQuery();
=> []
console.log(j);
=> []
console.log('test with string concat: ' + j);
=> test with string concat: [object Object]
j instanceof Array
=> false
j instanceof jQuery
=> true

How could one duplicate this with their own object?

--------- EDIT ---------

Thanks to ZER0 for figuring it out. Here's some example code to create an object that works just like jQuery in the console:

var Foo = function() {
  this.splice = Array.prototype.splice;
  Array.prototype.push.apply(this, arguments);

  return this;
}

var f = new Foo();
=> []
console.log(f);
=> []
console.log('test with string concat: ' + f);
=> test with string concat: [object Object]
f instanceof Array
=> false
f instanceof Foo
=> true

Very cool.

Improve this question
4
  • I want my function to return itself, not an array (note: jQuery() instanceof Array returns false). However, I'd like it to appear as an array in the console. Commented Mar 11, 2012 at 18:29
  • you can't concatenate a string and an object Commented Mar 11, 2012 at 18:50
  • I'm not trying to. I'm simply demonstrating jQuery's behavior. My goal is to duplicate that behavior. Also, you can concatenate strings and objects, so long as you set the toString() method on the object. Commented Mar 11, 2012 at 18:51
  • Could you put your own answer into its own answer, please? The question body is, well, for the question only ;) Commented Apr 21, 2013 at 7:32

5 Answers 5

Reset to default
6

I believe they have something like that:

// Adding items to an object like an Array:
var myObject = {splice : Array.prototype.splice};

Array.prototype.push.call(myObject, 1, 10, "foo");

// Getting items from an object like an Array:

alert(Array.prototype.slice.call(myObject, 0));

console.log(myObject);

alert(myObject);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

That's cool, but the only issue here is that Array.prototype.slice.call(myObject, 0) doesn't return an instance of type myObject, it returns an instance of type Array. jQuery manages to keep the return value as a jQuery object (even though it appears in the console as an Array), which is useful because then you can call jQuery methods on it.
Ok, so if you want that, you need to expose the splice property to your object, because it's the property that console.log calls to display array-like object. Notice that this behavior is not consistent across tools and browsers, and also it works for console only – alert and other stuff are not affected (exactly like jquery does).
Well the goal is not simply to create an array-like object, but it's for the console to display the object as an array. Even if you create an object capable of being spliced, when logged to the console (console.log(instanceOfMyNewObject)) it displays as a generic JavaScript object with its list of properties and values.
Yes I understood, and adding splice doing exactly that. However, as I said, it depends by the browser: for instance, this code in Chrome works as you want, but not in the web console of Firefox. However, this is exactly the same behavior that we have with jQuery – it use this approach.
Of course, you have to add the elements in the way I described in the code above – with push, that add length property – otherwise it won't work, unless you add manually length.
|
0

The console makes it look like an array because it has array-like properties. It has length and n keys using integers.

Improve this answer

1 Comment

So any object with integer keys and a length property appears as an array in the console? Can you duplicate this with a custom object?
0

When you call jQuery() you aren't passing any arguments to the function so it is returning an empty object. WHen you pass a selector as argument it creates an object of the elements that match the selector

Improve this answer

2 Comments

Yes, but it's not exactly an array, is it? It's a jQuery object: jQuery('span') instanceof Array returns false, but jQuery('span') instanceof jQuery returns true.
JQuery never returns an array
-1

It returns an empty array, because it did nothing - array of elements affected.

Proper way to inspect would be

console.log(jQuery);

if you would do

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

you will see that it returns array of elements.

Improve this answer

6 Comments

Yes, but how could I do this with an object of my own?
NudeCanalTroll, please explain your self a little better. Do you want to return an array from your function of affected elements or what?
No, read over my original question again. I want to create an object that behaves exactly like jQuery does. jQuery does not return an array, it returns an instance of itself: jQuery(anything you want to put here) instanceof Array is false.
@lukas.pukenis, he/she wants the output of his object to be [] when it is entered into the console on it's own, even though the object is not an array.
JQuery does not return an array.
|
-1

I think what you're trying to see are your object's properties. If that's the case, you're inadvertently converting the object into a string when you append it to another string. Use the , operator instead of + to show the object properties instead of the "stringified" version of the object:

console.log('test with string concat: ', j);
Improve this answer

1 Comment

I'm not trying to see the object properties. In fact, that's the default behavior that I'm trying to avoid. Instead, I want my object to appear as an array, even though it's not an array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.