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 Asynchronous Programming with JavaScript Asynchronous JavaScript with Callbacks Callbacks Review

Joseph Michelini
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Michelini
Python Development Techdegree Graduate 18,692 Points

For some reason, I'm still having trouble understanding this first example. Could anyone break it down?

I think I have a pretty good handle on callback functions, but for some reason, this first example still mystifies me. I understand what it's doing, but how? I don't know. When the function add is called, function(sum) is passed as the callback argument? What does that mean?

function add(a, b, callback) {
  callback(a + b);
}

add(2, 4, function(sum) {
  console.log(sum); // 6
});

Thanks so much in advance!

3 Answers

Steven Parker
Steven Parker
229,744 Points

"function(sum)" defines an anonymous function that takes a single argument into a parameter named "sum".

Since they are passed as arguments themselves, it's common for callbacks to be anonymous (have no name).

Joseph Michelini
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Michelini
Python Development Techdegree Graduate 18,692 Points

Thank Steven, I was just looking at the syntax incorrectly and couldn't see that it was an anonymous function being declared. Just one of the many benefits of staring at the code too long :)

Jay Tillman
Jay Tillman
2,151 Points

This concept is hard to understand at first. If I'm wrong, please correct me, but whatever anonymous function is passed as the third parameter when the function add is called evaluates to the sum of the first two parameters. In this example, it's 2 + 4, or 6. Then you can do what you want with result, again it's 6 in this example. This result can be logged to the console. It can be passed to an alert. "sum" is a convenient parameter name to pass to the anonymous function, but that parameter could be named anything and it still evaluates to the sum of the first two (a + b).

What is confusing at this state of my JavaScript learning is that the addition is done inside parenthesis and not as a statement inside brackets within any function definition or function call.

The addition within the parenthesis was confusing to me as well. It seems that whatever you put as a function argument, even another function, or write any operation manually it would get 'executed' first and derived to a single value that is later referred to in the example as 'sum'. I was also confused that (a+b) is a single value, not 2 references within the function declaration as I was expecting, not realizing that get's added to a single value used as a single parameter in the callback.

The first 2 examples taken together are confusing--sum isn't a reserved word, and might be easier to understand if the code read:

function whatever(a, b, spot-for-argument) { spot-for-argument(a + b); }

whatever(2, 4, function(foo) { console.log(foo); }

which turns into... function whatever(2, 4, function(foo)) { foo(2 + 4); }

...when called

and console.log(foo) returns 2+4 which is 6.

The next example has prompt(), which is a reserved method and actually does something--prompts, which you can see if you paste the code into the console and run it.