Passing arguments in anonymous functions in JavaScript

Question

Sometimes I see JavaScript that is written with an argument provided that already has a set value or is an object with methods. Take this jQuery example for instance:

Answer 1

Here's a example of passing parameters into anonymous function

    var a = 'hello';

    // Crockford
    (function(a){alert(a)}(a));

    // Others
    (function(a){alert(a)})(a);

It uses closure, since it's an anonymous function (it actually all depends how you wrote it)

Answer 2

To me, this looks like were passing a function to the createServer function with two arguments that have methods already attached to them.

No. They were passing a function to createServer that takes two arguments. Those functions will later be called with whatever argument the caller puts in. e.g.:

function caller(otherFunction) {
     otherFunction(2);
 }
caller(function(x) {
    console.log(x); 
});

Will print 2.

More advanced, if this isn't what you want you can use the bind method belong to all functions, which will create a new function with specified arguments already bound. e.g.:

caller(function(x) {
    console.log(x);
}.bind(null, 3);
});

Will now print 3, and the argument 2 passed to the anonymous function will become an unused and unnamed argument.

Anyway, that is a dense example; please check the linked documentation for bind to understand how binding works better.

Answer 3

If you looked at the code for createServer, it'd look something like this:

function createServer (handleRequestAndResponseFunction) {
    handleRequestAndResponseFunction(actualRequest, actualReponse);
}

ok, no it wouldn't, but it's a simple example. createServer takes a function that accepts two arguments.

In more realistic terms, when you pass in that function of two arguments, it does whatever middleware processing and stuff that it needs to, and then calls that function, passing its own request and response variables.

Answer 4

Let's take a look at $.each for the example:

each: function (obj, callback, args) {
    var value,
    i = 0,
        length = obj.length,
        isArray = isArraylike(obj);

    if (args) {
        if (isArray) {
            for (; i < length; i++) {
                value = callback.apply(obj[i], args);

                if (value === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                value = callback.apply(obj[i], args);

                if (value === false) {
                    break;
                }
            }
        }

        // A special, fast, case for the most common use of each
    } else {
        if (isArray) {
            for (; i < length; i++) {
                value = callback.call(obj[i], i, obj[i]);

                if (value === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                value = callback.call(obj[i], i, obj[i]);

                if (value === false) {
                    break;
                }
            }
        }
    }

    return obj;
}

This gets called from

$(".selector").children().each(function(i) {
    console.log(i);
});

like:

return $.each.call(this, callback /* this is your function */, args /* which is an additional thing people rarely use*/ )

This is the line (in the first block) you want to look at

callback.call(obj[i], i, obj[i]);

It's calling the callback, and passing the object as the context – this is why you can use this in the loop. Then the iteration i and then the same object as the context are both sent as arguments to the callback. It's a little bit like magic; until you look at the source code.

Answer 5

Yes, you are passing functions as arguments. The functions that you pass will of course have their own arguments.

And, these arguments can be anything including objects which may have their own methods, etc.

http.createServer will accept a function and it will know how may arguments that function has. One way to to do this is to check the arguments property of the passed in function. Or the api developer may have used the actual elements.

The writer of this function will know what is expected as arguments and will document it in the api documentation.