CODEWITHSUNDEEP
javascriptnode.jscallback
InfoEngi
InfoEngi

Reputation: 323

Javascript - Advantage of Callbacks

i have a little problem in understand of callbacks. I have read a lot in the last 2 days and what i have understand is the following (correct me, if i'm wrong):

JavaScript is a single thread language and you can program synchronous and asynchronous. Synchronous means, each statement waits for the previous statement to finish before executing. That can lead into trouble, because if for instance a connection to a database needs a lot of time, the statements after the previous has to wait. Finally that's very bad and that's why it's better to program asynchronous in Javascript, because Asynchronous code doesn't have to wait, the code can continue to run and the user don't have to wait.

To program asynchronous the Callbacks (functions of higher order) are needed.

Now i have try to program a little example by a lot of tutorials, etc.

function testCallback(a,callback){
    console.log('1.function and given parameter: '+a);
    callback(10);
}    

testCallback(5 , function(x){
    console.log("2.function and given parameter of 1. function: "+x);
});

Is that right? the output is:

1.function and given parameter: 5
2.function and given parameter of 1. function: 10

I do not understand, what the advantage is of this code, because i think that can still lead into trouble? If "console.log('1.function and....') has problems, the callback(10) function would even stop or not?

Thanks for any help!

Upvotes: 0

Views: 809

Answers (3)

Goyal Vicky
Goyal Vicky

Reputation: 1299

A JavaScript Callback Function is a function that is passed as a parameter to another JavaScript function. Callbacks can be synchronous or asynchronous. Simply passing a function as parameter will not change its current behavior.

It's behavior can be changed by the method which will execute it by calling it inside an event listener or setTimeout function etc. Basically event listener or setTimeout etc are handled by webapi in async fashion. If callback functions are inside these functions then these are moved to a queue by webapi when they are activated like button click(event listener) or time declared in setTimeout passed. They will move from queue to stack(if stack is empty) and run on stack finally.

The main advantage of using callback function can be seen from below code :-

var add = function(x,y) {
    return x+y;
}

var multiply = function(x,y){
    return x*y;
}

var calculate = function(x,y,callback){
    return callback(x,y);
}

console.log(calculate(4,9,add));

Upvotes: 0

John Whiles
John Whiles

Reputation: 56

In javascript callbacks can be synchronous or asynchronous. Synchronous callbacks can have a lot of benefits, but they don't do anything to stop your code blocking.

I think the best way to understand what asynchronous code is, and why it's beneficial, is to learn how Javascript actually evaluates your code. I recommend this video, which explains the process very clearly https://www.youtube.com/watch?v=8aGhZQkoFbQ

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074335

JavaScript is a single thread language...

No, it isn't. The language says nothing about threading. Most environments give you a single thread per global environment, though (and on browsers you can create more, which interoperate through messaging). NodeJS provides just the one thread. Some environments (such as Rhino or Nashorn on the JDK) provide true multi-threading (and all the advantages and hassles that can involve).

Using a callback doesn't make code asynchronous. Your example, for instance, is not asynchronous. Consider:

function testCallback(a,callback){
    console.log('1.function and given parameter: '+a);
    callback(10);
}    

console.log("Before the call");
testCallback(5 , function(x){
    console.log("2.function and given parameter of 1. function: "+x);
});
console.log("After the call");

Note how we don't see After the call until after 2.function and given parameter of 1. function: 10. If the callback were asynchronous, we'd see it before:

function testCallback(a,callback){
    console.log('1.function and given parameter: '+a);
    setTimeout(function() { // Using setTimeout
      callback(10);         // to make this call
    }, 0);                  // asynchronous
}    

console.log("Before the call");
testCallback(5 , function(x){
    console.log("2.function and given parameter of 1. function: "+x);
});
console.log("After the call");

Whether a callback is called synchronously or asynchronously depends entirely on what the function you're passing it to does. For instance, the callback used by Array#sort is called synchronously, but the callback used by setTimeout is called asynchronously.

For code to be asynchronous, it has to start an operation and then have that operation complete later, triggering a callback. setTimeout does that, as does ajax when used correctly, as do a wide range of other things.

Note that callbacks are currently how you handle asynchronous behavior (simple callbacks like the above, or promise callbacks), but the next specification (ES2017) will define built-in language semantics for dealing with asynchronousity without callbacks in the form of async and await. You can use that syntax today if you transpile with a tool like Babel.

Upvotes: 5

Related Questions