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

JavaScript

Why 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

All 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.

Thanks! Is there ever a time when a function will execute when its passed in as a parameter?

Generally 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.

Thanks! Is there ever a time when a function will execute when its passed in as a parameter?

No, 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.

function test(cb) {
    alert(cb);
}

test((function() {
    return 'Hello World!';
})());

A 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

Alright, 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