I'm a bit confused in how functions operate in javascript. I understand that they're all objects but how does that change how I would use them as arguments?

For instance, if I'm trying to use a callback function where the 2nd argument is evaluated after 1000ms...

$(this).fadeIn(1000,function(){alert('done fading in');});

Why can't I achieve the same effect with:

$(this).fadeIn(1000,alert('done fading in'));

If I do, it evaluates both at the same time. That is, (this) element fades in and the alert pops up at the same time.

When I'm calling alert(arg), aren't I creating a new object which gets passed into fadeIn()?

How exactly does this work?

I'm a bit confused in how functions operate in javascript. I understand that they're all objects but how does that change how I would use them as arguments?

For instance, if I'm trying to use a callback function where the 2nd argument is evaluated after 1000ms...

$(this).fadeIn(1000,function(){alert('done fading in');});

Why can't I achieve the same effect with:

$(this).fadeIn(1000,alert('done fading in'));

If I do, it evaluates both at the same time. That is, (this) element fades in and the alert pops up at the same time.

When I'm calling alert(arg), aren't I creating a new object which gets passed into fadeIn()?

How exactly does this work?

• javascript
• jquery

• good question. I'll stick around for this one – OptimusCrime Commented Jan 3, 2012 at 8:10
• For the language nerds: The technique you want is called [partial function application][1], also often called Currying. You effectively want a new function where some arguments are fixed, and others are not. [1]: en.wikipedia.org/wiki/Partial_application – nd. Commented Jan 3, 2012 at 9:53
• 1 @nd: No, that's not really it. There is no currying or partial evaluation going on in the example. If you are looking for a term, anonymous function is it. Also higher order functions for functions that take functions as arguments. – KaptajnKold Commented Jan 3, 2012 at 12:10
• @KaptajnKold You are right - but I read the question that randomafk assumed that alert('done fading in') would return a curried function (which it doesn't). I hope that I haven't increased the general confusion of the OP. – nd. Commented Jan 3, 2012 at 12:16
• 1 @nd: Currying actually does exist in EcmaScript 5. You could do this: $(this).fadeIn(1000, alert.bind(window, "done fading in")). – KaptajnKold Commented Jan 3, 2012 at 12:38

3 Answers 3

In this

 $(this).fadeIn(1000,alert('done fading in'));

what does fadeIn() see as its second argument? It's the result of calling

 alert('done fading in')

we are making the call to alert() before calling fadeIn().

In this case

$(this).fadeIn(1000,function(){alert('done fading in');});

we have an object

 function(){alert('done fading in');}

which fadeIn() calls at the right time.

When you write:

$(this).fadeIn(1000,alert('done fading in'));

you call function called alert immadiately by putting function name and parentheses after this name. And to fadeIn the result of this call is passed - this is undefined, because alert returns always undefined.

When you write

$(this).fadeIn(1000,function(){alert('done fading in');});

you create a function object that and pass this function object to fadeIn. So after fadeIn is done it can call this function.

It is the same as:

// create function
var callback = function () { alert('done fading in'); };
// and pass this function to fadeIn
$(this).fadeIn(1000, callback);

but when you write:

var callback = alert('done fading in');
$(this).fadeIn(1000, callback);

then you will call alert immadiately and pass to fadeIn value which alert returns - undefined.

In the first line the second parameter is a method. And in the second line its a method call.

you could also write it like this

function fadeInCallback() {
    alert('done fading in');
}

$(this).fadeIn(1000, fadeInCallback);

So what we do is that we pass in a reference to the fadeInCallback so the jQuery fadeIn function can call fadeInCallback once it's done with the fading.

The second line will execute

alert('done fading in');

before executeing the jQuery fadeIn function