Confuse about javascript callback function

Question

I write two function, which callback will be invoke by the fn:

var callback = function (num) {
 return num + 1; 
}
var fn = function (callback) {
 callback();
}
fn(callback(5));

the firebug tell me: number is not a function ,I know the callback is execute immediately, how can I let it execute in the fn return the num in the fn function, the fn function is only allow the callback parameter

• Henrik Andersson: I think the concept of callback is lost to you. A callback is a function that is invoked when the "first" function has done its work. like function(someVar, function(){...})
• Elias Van Ootegem: I think it might be time for you to learn about closures, anonymous functions and the fact that JS is a functional language

Answer 1

Your example is a not great, seeing as there is no actual need for a second function. But this is what I'd do all the same:

function makeCallback(num)
{
 return function()
 {
 return num+1;
 }
}
fn = function (callback)
{
 callback.apply(this);
}

Seeing that a callback is generally called in an object context (DOM elements, when an event is handled etc) You might want to call the callback function, you passed as an argument to be called in the objects' context.

Closures are a bit daunting and hard to fathom at first, but there are some great videos with Douglas Crockford on youtube on the matter, that really explain their workings well

• Elias Van Ootegem: @Esailija: Shame on me, I tend to be rather fastidious about Constructors vs. function capitalization. Thanks for the catch. I've had a bad night, hence the sloppiness

Answer 2

callback(5) is not function, just result value. so.. callback() is must function.

var callback = function (num) {
 return function(){
 return num + 1;
 }; 
}
var fn = function (callback) {
 return callback();
}
fn(callback(5));

Answer 3

When you call callback it returns 5 + 1 to fn - and 6() is invalid JavaScript.

callback(5) === 6
fn(callback(5)) === fn(6)
fn(6) === 6()

You could modify callback to return a function that adds one to the argument provided:

var callback = function(num) {
 return function() {
 return num + 1;
 };
}

Now, when you call callback() it returns a function rather than a number - the returned function has access to the number you passed in to the "factory" function and whenever it is called it will return that number, plus one. Thus:

callback(5) === function() { var num = 5; return num + 1; }
fn(callback(5)) === fn(function() { var num = 5; return num + 1; })
fn(function() { var num = 5; return num + 1; }) === (function() { var num = 5; return num + 1; })()

Answer 4

It is happening due the parameter naming. The way you are using the parameters, makes a call to function called 6() which ends up being incorrect.

So, Use the following (IMO, this is what you are attempting)

var callback = function (num) {
 return num + 1; 
}
var fn = function (num) {
 callback(num);
}
fn(callback(5));

Demo

And so far for the attempt of your to create a callback function. You are only missing a return statement in the function see the result.

var callback = function (num) {
 return function(){
 return num + 1;
 }; 
}
var fn = function (callback) {
 return callback();
}
console.log(fn(callback(5)));

Demo

• Esailija: The op wants num (the argument to fn) be a function that he can call (not the downvoter but this should explain it :P)