Javascript Callback functions vs just calling functions

Question

So i don't really understand the point of "callback".

Here is an example of callback:

function sayBye(){
   alert("Bye!");
}

function saySeeYou(){
   alert("See you!");
}

function sayHello(name,myfunc){
   alert("Hello");
   myfunc;
}

sayHello("Max",saySeeYou());

Whats the point of passing in a function when you can just call the function? like this code does the exact same:

function sayBye(){
   alert("Bye!");
}

function saySeeYou(){
   alert("See you!");
}

function sayHello(name){
   alert("Hello");
   saySeeYou();
}

sayHello("Max");

You are "passing" the callback incorrectly. You are *calling* the function instead of *passing* it. It should be `sayHello("Max",saySeeYou);` and `myfunc();` instead of `myfunc;`. And you are not always in control of when a function is called. Think about Ajax, event handlers, or basically any asynchronous process. All reasons why callback functions are necessary. — Felix Kling, Aug 08 '14 at 02:43
Regarding your edit, you should now see an error in the console, something like "undefined is not a function", since `myfunc` has the value `undefined`. [Learn how to debug JavaScript](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) — Felix Kling, Aug 08 '14 at 02:48
See http://stackoverflow.com/questions/3523628/newbie-approach-what-is-a-javascript-callback-function — Barmar, Aug 08 '14 at 02:53

hugomg · Accepted Answer · 2014-08-08T02:55:55.647

Whats the point of passing in a function when you can just call the function?

Usually, callbacks Javascript are used in Javascript for code that you want to run in the future. The simplest example is setTimeout: if you call the callback now then the code runs immedieately instead of after 500 ms.

//prints with a delay
console.log("Hello");
setTimeout(function(){
   console.log("Bye");
}, 500);

//no delay this time
console.log("Hello");
console.log("Bye");

Of course, it would be really neat if we could write something along the lines of

//fake Javascript:
console.log("Hello");
wait(500);
console.log("Bye");

But sadly Javascript doesnt let you do that. Javascript is strictly single-threaded so the only way to code the wait function would be to pause the execution of any scripts in the page for 500 ms, which would "freeze" things in an unresponsive state. Because of this, operations that take a long time to complete, like timeouts or AJAX requests usually use callbacks to signal when they are done instead of blocking execution and then returning when done.

By the way, when passing callbacks you should only pass the function name. If you add the parenthesis you are instead calling the function and passing its return value instead:

//When you write
foo(10, mycallback());

//You are actually doing
var res = mycallback();
foo(10, res);
//which will run things in the wrong order

Claudio Redi · Answer 2 · 2014-08-08T02:48:35.647

Your code is not correct as Felix Kling already pointed out. Besides this, passing a function instead of calling one directly allows you to insert different behavior, your code is more decoupled and flexible. Here an example:

function sayBye(){    
    alert("Bye!");    
}

function saySeeYou(){    
    alert("See you!");   
}

function sayHello(name,myfunc){    
    alert("Hello");
    if (myfunc) {  
       myfunc();    
    }
}

sayHello("Max",saySeeYou);

// I'm inserting a different behavior. Now instead of displayng "See you!" 
// will show "Bye!". 
sayHello("Max",sayBye);

score 0 · Answer 3 · answered Aug 08 '14 at 02:49

You are doing it wrong, you should do like bellow

Don't call the function just pass the function as callback

use this

sayHello("Max",saySeeYou); //here the second parameter is function

instead of

sayHello("Max",saySeeYou());//This will put the result of saySeeYou as second parameter

in say hello call the functiom

function sayHello(name,myfunc){
    console.log("Hello");
    myfunc();
}

Javascript Callback functions vs just calling functions

3 Answers3