Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jaime Jayne
882 PointsWhy is it necessary to call this callback function when its already passed in as a parameter?
function myDinner( param1, param2, callbackFunction ) {
alert( 'Started eating my dinner. \n\n It has: ' + param1 + ', ' + param2);
callbackFunction (); }
myDinner ( 'Rice', 'Curry', function() {
alert( 'Finished eating my dinner.' );
});
Since myDinner accepts 3 arguments (inclusive of callbackFunction), why is it necessary to call the function within myDinner?
I've read about asynchronosity but that hasn't helped in understanding why its necessary to call it when its obviously being passed in..
Thanks
3 Answers
Lukas Hostettler
1,938 PointsAll you're doing is passing the callback Function into the arguments array of the function, it's not executing however. That's why you have to write it out with the parentheses afterwards so the function runs.
Ricardo Hill-Henry
38,443 PointsA callback function is merely passing a function as an argument, and then using that function. To tell a function you're ready to use it, you have to call it.
Assume you have your callback function declared like
var callbackFunction = function(){
//fancy code
}
When you pass your callbackFunction into myDinner, you can't expect the function to be called in the parameter (which it wouldn't anyway).
function myDinner(param1, param2, callbackFunction){
//more fancy code
//Then call callbackFunction
callbackFunction();
}
In this context, it should be clear why callbackFunction is called upon within myDinner - code within a function isn't executed until it's called upon.
If you wanted to execute a function "immediately" you could pass an anonymous function as a parameter. This is essentially done in every JQuery method. Obviously the code won't be executed until it's containing function is called upon.
$("#btn_1").click(function() {
alert("I've been clicked");
});
or
function newFunction( param1, param2, function functionParam(){
//blah blah
}() /*using the open and close parenthesis after a function declaration immediately invokes it */
) //closes newFunction parameter list
functionParam(); //not necessarily needed now
} //close newFunction
Sean T. Unwin
28,690 PointsAlright, so function myDinner() takes 3 arguments, the last of which is a function. (You already stated this, I know). The first part of your code is called the function definition -- it defines what the function does and what kind of parameters it may take, as well as the order in which they can be placed (i.e param1 is first in the order, param2 is second, and a function is third).
When a function declaration takes another function as a parameter it is called a callback -- the function is going to call back another function, like a phone call.
Sometimes, for a function to work properly, it may have to call a friend (the callback function) to get the job done. Sometimes this friend lives outside of his neighbourhood -- a neighbourhood of a function is called the scope.
At times these other functions are not neighbours (they live outside the scope) so they need to call them for help. Passing some function as a parameter is like giving that function (the one that is taking the other function as a parameter) it's name or phone number.
When you are invoking (or calling, or using, or whatever word you use to wrap your head around what is happening is all good) the function myDinner with
myDinner ( 'Rice', 'Curry', function() {
alert( 'Finished eating my dinner.' );
});
you are passing your anonymous function as a parameter - giving myDinner() your anonymous function's phone number. By the way it's an anonymous function because it doesn't have a name, but that's okay here because a function can be created practically anytime given the right circumstances (just like friends!), at least in JavaScript. myDinner() just made a friend, but he doesn't have a name; it's cool.
Now I'm going to take us back full circle. When myDinner() is initially decalred with
function myDinner( param1, param2, callbackFunction ) {
alert( 'Started eating my dinner. \n\n It has: ' + param1 + ', ' + param2);
callbackFunction ();
}
the last line, before the closing squigly bracket, callbackFunction(); is where myDinner() is calling his friend, the anonymous function you created at the time when you (or more specifically the application) called myDinner().
So to sum up, a callback function may be passed as a parameter and then later invoked. So it's like, hey, I have this buddy's phone number in my pocket. which we will call an arguments array - the parameters that myDinner() takes, and I'm pretty sure I need to call this dude so I can finish my work.
I think I may have rambled a bit there, but I hope the point got across without confusing you further. o.0
Jaime Jayne
882 PointsJaime Jayne
882 PointsThanks! Is there ever a time when a function will execute when its passed in as a parameter?
Aurelien Schlumberger
6,127 PointsAurelien Schlumberger
6,127 PointsGenerally speaking, when you create a function/method/block you want to return something, hence the public method return. In your case you are returning the function that can be executed. Parameters are options to your function but won't return anything outside the scope of your function. Also this is not just Javascript, it can be true in some other languages.
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsNo, callback functions can only ever execute when invoked manually but in saying that anonymous functions in general can be executed and return a value straight away like the below example.