When to declare a new (anonymous)function in javascript?

Question

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?

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.
– nd., Commented Jan 3, 2012 at 9:53
@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
– 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.
– nd., Commented Jan 3, 2012 at 12:16
@nd: Currying actually does exist in EcmaScript 5. You could do this: $(this).fadeIn(1000, alert.bind(window, "done fading in")). — KaptajnKold
– KaptajnKold, Commented Jan 3, 2012 at 12:38

djna · Accepted Answer · 2012-01-03 08:20:18Z

19

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.

answered Jan 3, 2012 at 8:20

djna

56.2k14 gold badges80 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateusz W · Accepted Answer · 2012-01-03 08:24:45Z

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.

Carl Bergquist · Accepted Answer · 2012-01-03 08:19:39Z

2

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

answered Jan 3, 2012 at 8:19

Carl Bergquist

3,9622 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

When to declare a new (anonymous)function in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related