How does jQuerys $.each() work?

Question

Maybe a bad title, but this is my problem: I'm building a framework to learn more about javascript. And I want to use ""jQuery"" style.

How can I make a function where the () is optional?

$("p").fadeOut(); //() is there
$.each(arr, function(k, v) {...}); //Dropped the (), but HOW?

This is what I have come up with, but it don't work:

$2DC = function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
}


$2DC("#id1"); //Work
$2DC("#id2").circle(); //Work
$2DC.circle(); //DONT WORK

Answer 1

$ is really just an alias for the jQuery function. You can call the function with:

jQuery("p"); or $("p");

but remember, in JavaScript you can attach "stuff" directly to functions.

function foo(){
}
foo.blah = "hi";
foo.func = function() { alert("hi"); };

foo.func(); //alerts "hi"

This is how (conceptually) jQuery's each function is defined.

jQuery.each = function(someArr, callback) { ...

And so now jQuery.each is a function that can be called like this:

jQuery.each([1, 2, 3], function(i, val) {
});

or the more familiar

$.each([1, 2, 3], function(i, val) {
});

---

So for your particular case, to support:

$2DC.circle(); 

You'd have to add the circle function directly to $2DC:

$2DC.circle = function(){
   // code
};

Answer 2

Functions are objects in JavaScript. As such, they can be used as variables, just like ints, strings, etc.

In your example, $2DC is a function that returns an object containing a circle function.

$2DC.circle(); doesn't work as circle is only a property of the returned object, not of $2DC itself.

In the case of $.each, this works as $ contains an each property. Your $2DC can do that too. Like this:

$2DC.circle = function(){
}

Now, $2DC.circle(); will work. So, as you see functions are objects, and as such can have properties just like other objects.